ToolkitはReactのReduxの記述をシンプルにできメンテナンス性も向上するとお伝えしました。関連【React学習ログ5】Reduxを実装しながら解説してみた続きを見るではこのままReduxだけ実装を続けていくとどんな問題があるのでしょうか?主に下記の3つです。Toolkitはこれらの問題を一気に解決してくれます。ソースコードは前回の記事を元に実装しています。Toolkitのインストール方法は、下記のコマンドを実施します。@reduxjs/toolkit続いてstore.jsを書き換えましょう。store;1行目でcreateSliceとconfigureStoreをインポートしています。configureStoreはReducer関数が複数になったときにそれらを一つにまとめてくれます。ここでは書き方を覚えるぐらいで大丈夫です。createSlice関数はReducer関数が複数ある場合一つづつまとめることができます。createSlice関数は次のオブジェクトを返します。action.typeで分けた分岐をオブジェクトでメソッドのようにまとめる}nameとinitialStateはわかりやすいと思うので説明を飛ばします。reducersは通常のReduxではaction.typeで条件分けをしていた内容を、オブジェクトにして、それぞれメソッドに書き換えています。それぞれ条件分けをメソッドにしたと考えると理解しやすいと思います。通常のReduxではreturnされたときは初期値で設定した、オブジェクトの内容と揃えた状態でreturnさせなければ意図しない挙動になると一つ前のブログで説明していました。Toolkitではその心配はありません。Toolkitが変更しないstateを維持しながら新しいデータに上書きをしてくれます。Toolkitはactionを省略できます。increaseの時はamountを別で設定しているためこう言う場合はactionを設定しましょう。Toolkitでのstoreはactionに渡すプロパティ名は「payload」と指定されています。dispatchする方法dispatchするにはactionクリエーターを使います。store;最後から2行目で「counterSlice.actions」と記述しています。これはactionクリエーターと言われ、この直後に、createSliceで作ったオブジェクトの中のreducersオブジェクトのメソッドを繋げることでdispatchできます。通常はコンポーネントからdispatchさせるので、storeではactionクリエーターだけを作ってエクスポートします。次にstoreで作ったactionクリエーターをCounter.jsにインポートします。Counter;そして上記のようにdispatch(counterActions.メソッド())と書けば完成です。Toolkitではactionの設定をしないので、この様な形でメソッドの引数として追加情報を渡しています。これが先ほど紹介したstore.jsの「payload」の値になります。ここで最初に説明した、通常のReduxでは問題になり得ることが2つ解消されています。それは、「action.typeが増えてることで打ち間違えの危険性がある」と「管理するデータを誤って上書きしてしまう可能性」の2つです。Toolkitを使うことでメソッドを指定するだけでよくなりました。することでわずかですが、打ち間違えの危険性は少なくなりました。データの上書きも起きないようになりました。Toolkitでの書き換えは完了しました。問題なく動いています。Toolkitの方が記述量が減り、コンパクトにまとまったように見えます。複数のstateを管理できる今まではカウンターの数値のstateの管理だけでしたが、ここでログインログアウトの別のstateの管理も追加します。ちなみにログイン/ログアウトを切り替えても他の挙動に何も影響ありません。store.jsにログイン/ログアウトの内容を書きます。store;繰り返しの部分があるので細かな部分の説明は省略します。複数のReducerを一つにまとめる時はconfigureStoreを下記の様にreducerに対してオブジェクトを作り、記述していきます。キー(下記のcounterやauth)は任意で名前をつけます。},しかし元々は下記の形だったので上記に記述を変えることで各コンポーネントのuseSelectorでの記述も変更する必要があります。counterSlice.reducer,});このように変更します。(Counter.js。state.counter.showNum);カウンターのactionクリエーターと同様にログイン/ログアウトのactionクリエーターをエクスポートします。authSlice.actions;次にAuth.jsはこのように記述します。Auth;これで完成です。Toolkitを使っているといっても、扱うデータが増えるとファイルは長くなります。ここではファイルの分割について解説します。ファイル構成は上記のようになります。store.jsを親として、各機能別でファイルを分けます。store.jsです。Auth;これでstoreのメンテナンス性がさらに向上しました。最後まで残っていた「管理するデータ数が増えていきReducer関数が長くなりファイルが見にくくなる」という問題もこれで解消されます。最後にこのコンテンツでは一般のエンジニアがどのように言語(今回はフレームワークになりますが)を学習し、つまずき、乗り越えていっているのかを垣間見えるようにしていこうと思います。できるだけ画像、動画などを盛り込んで視覚的に理解できるように工夫しています。これからプログラミングを学ぼうと考えている方の為になる発信をできれば思いますので、温かい目で見てもらえると嬉しいです。Toolkitを解説する上で使った教材は、Udemyのコースになります。興味があればぜひ使ってみてください。このコースの補足教材としてこのブログを使ってもらえると効果的だと思います。Hooksの一つのuseRefについて使い方から、useStateとの違いまで詳細に解説しました。React学習ログ【React学習ログ5】Reduxを実装しながら解説してみたReduxについて実装を交えながら解説します。Hooksの一つのuseContext()について詳細に解説いたします。React学習ログ【React学習ログ7】react-transition-groupでアニメーションを実装してみたreact-transition-groupでアニメーションを実装してみた【React学習ログ5】Reduxを実装しながら解説してみた【React学習ログ7】react-transition-groupでアニメーションを実装してみたフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。