前回の記事でReduxの役割や全体図を解説しました。関連【React学習ログ4】Reduxをどう理解したかを解説|図解あり続きを見る今回の記事では実際にReduxを使ってできるだけシンプルな内容とコードで実装し、解説もしていきたいと思います。皆さんの理解につながると嬉しいです。今回の実装ではReduxを使ってカウンターを作っていきます。全部で7つのSTEPがあります。Reduxを使うための環境構築まずはReduxをインストールします。redux次にReduxをReactで使えるようにするためのパッケージをインストールします。(これを入れることでReact上でReduxのstoreやreducerなどが簡単に使える様になります。react-redux下準備はこれで完了です。次から実際にコードを書いていきます。store(storeとだけの表記の時もあります)を作ります。その前にstoreを管理しやすくするために専用の「store」フォルダを作り、その中に「store.js」を作りそこにstoreを構築していきます。createStore();これでstoreの構築は完了です。ここで問題があります。エディターによっては添付画像のようにcreateStoreに線が入りアラートが出てくる場合があります。Toolkit」の使用を推奨しているためこのアラートが出てきてしまうようです。Toolkitを使用しどの様に便利なのかを実感できるように解説します。store内にReducer関数を設置するデータ更新機能であるReducer関数をstore内に設置します。createStore(counterReducer);Reducer関数はuseContextで詳しく解説しているので、ここではざっくりと説明します。このReducer関数であるcounterReducer()はこの後設定するdispatchから受け取るactionオブジェクトを使い最新のstateを更新しています。useContextと異なるのはReduxのReducer関数のstateに初期値を設定している点です。useContextでは別のところに初期値を設定していましたね。最終行のcreateStoreでReducer関数を呼び出しています。storeが構築される時(ページ訪問時やデータ更新時)にReducer関数が実行されます。この時に先ほどの初期値を設定していないと、ページ読み込み時にstateの値がないと判断されエラーが出てしまいます。storeへの記述は一旦完了です。storeを別のコンポーネントで使える様にエクスポートします。storeをReactアプケーションに供給するためにProviderを設定します。基本的にコンポーネントの最上位にあるindex.jsに設定します。storeにアクセスすることができます。/></Provider>);3行目で一番最初にnpmでインストールした「react-redux」から「Provider」をインポートしています。storeをインポートしています。最終行で全体のAppコンポーネントをProviderで囲んでいます。storeをReactアプリケーションに供給することができるようになります。この段階でアプリケーションとデータセンターが繋がったと言うことになります。storeのデータを読み取るためにはuseSelectorと言うHookを使います。Counter.jsに記述していきます。Hookは今までreactからインポートしていましたが、useSelectorは「react-redux」からインポートします。Counter;useSelectorは関数を返します。store内のstateと繋がっています。storeは最終的にcounterを返しているので、state.counterと記述します。これを「counter」と言う変数に格納します。state.counter);ちなみにここでReducer関数に初期値を設定していないと、ページ読み込み時にCounterコンポーネントで記述した「counter」の値がない状態になるのでエラーが出ます。storeからデータを取得することができました。現在は初期値である0が表示されています。useDispatchでデータ更新をする続いてボタンを押したらデータ更新ができるように実装していきます。ここではReducer関数を動かすためのuseDispatch()の使い方を解説します。引き続きCounter.jsに記述していきます。Counter.jsには元々ボタンを実装しています。Counter.jsにuseDispatchを「react-redux」からインポートします。Counter;5行目、useDispatchはReducer関数にactionオブジェクトを渡すdispatch関数を返します。〇〇}と言うオブジェクトを渡していますね。これがactionオブジェクトです。actionオブジェクトが作られるとすぐにReducer関数に渡され、Reducer関数が実行されます。これはuseReducer()と同じですね。Hooks基礎】useReducerを理解する続きを見るこれでボタンを押すたびにdispatch関数が実行され、actionオブジェクトが生成されます。storeのReducer関数へ渡されるようになり、値が変わるようになります。store内のReducer関数でaction.typeの条件分けによってデータ更新の内容が変わっていますね。5増えるボタンを作る押すと5増えるボタンを設置します。結論として、actionオブジェクトに新しい値を追加すれば完成です。Counter;上記のincreaseHandler内のdispatch関数の中のオブジェクトに新たなキーとバリューを追加しました。store内に条件わけを追加し、「action.amount」を追記して完成です。store;これでdispatch内のamountの数値を変えることで増える数値を任意に設定できるようになりました。複数のstateの管理を同時に行う最後にカウンターとは別に出力される数字の表示/非表示のstateの管理もしてみましょう。store.jsを下記のように記述します。store;追記した内容は、初期値にshowNum:trueを追加しました。「showNmu:true」でカウンターの数字の表示、「showNmu:false」でカウンターの数字の非表示になるように実装していきます。注意ポイントは条件分けを設定した各returnにもshowNumを追記しないといけない点です。これはデータ更新時に新しいデータを上書きされるようになっているので、counterだけしか書かないと、初期値のcounterとshowNumの構成が変わってしまい、意図しない挙動になってしまいます。複数のstateを管理したい場合には、初期値のプロパティー内容とreturnで返ってくるプロパティ内容は同じにしないといけないと覚えておきましょう。続いてCounter.jsを変更します。Counter;5行目でuseSelectorを使い新たに「showNum」のstateを取得しています。dispatchを設定しaction.typeを「toggle」になるように記述して完成です。ここまでがReduxの基本的な実装になります。長くなってきたので、ここでこの記事は終わりです。Toolkit」について書きます。Toolkitを使うことでより複雑な内容をシンプルに書くことができメンテナンスも楽になります。最後に全体の流れをまとめた図をもう一度添付します。Reduxはこの記事の内容を理解しないと攻略できないので理解できるまで何度も読みましょう。最後にこのコンテンツでは一般のエンジニアがどのように言語(今回はフレームワークになりますが)を学習し、つまずき、乗り越えていっているのかを垣間見えるようにしていこうと思います。できるだけ画像、動画などを盛り込んで視覚的に理解できるように工夫しています。これからプログラミングを学ぼうと考えている方の為になる発信をできれば思いますので、温かい目で見てもらえると嬉しいです。今回私がReduxを解説する上で使った教材は、Udemyのコースになります。興味があればぜひ使ってみてください。このコースの補足教材としてこのブログを使ってもらえると効果的だと思います。Hooksの一つのuseRefについて使い方から、useStateとの違いまで詳細に解説しました。Hooksの一つのuseEffect()について使い方を詳細に解説いたします。Toolkitについて実装を交えながら解説します。Toolkitを実装しながら解説してみるフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。