TypeScriptReact.jsの状態管理ライブラリはReduxが有名ですが、結構複雑だったりステートを一つ更新するだけでもタイプ量が多くなってしまうというデメリットもあります。Toolkitというライブラリを使用して、もう少し簡単に状態管理する方法をご紹介します。7.1でお送りします。Toolkitを導入します。Todoアプリについては下記記事を参照ください。Todoアプリを作ってみるなぜReduxを使うのか前回作成したTodoアプリの規模のアプリケーションであれば、このままでも問題はないのですが、コンポーネントが増えるとデータを次々とPropsで渡すということにり管理が難しくなります。ステートを変更する関数はリストに作成しましたが、ここでよかったのかという問題もあります。この辺りを解決する手段としてReduxというライブラリがあります。Reduxのフロー図かなりざっくりなのですが、Reduxのステート更新の流れです。View(コンポーネント)からActionを実行して、Reducerを通してStateが更新され、Viewに反映されます。使用することで、基本的な流れは変わりませんが、ある程度処理をまとめて書くことができるというイメージです。ライブラリのインストール最初にライブラリのインストールをしましょう。@reduxjs/toolkitの他にreact-reduxと、TypeScriptの場合@types/react-reduxが必要です。使う為の準備をしていきます。rootReducer.tsファイルを下記のように新規作成します。rootReducercombineReducersは今は空ですが、後ほど作成するReducerを入れることになります。RootStateはステートの型指定する時に使います。次はstore.tsです。configureStoreに先ほど作成したrootReducerを登録してstoreとして使えるようにします。store次に共通のストアを各コンポーネントで使えるようにする必要があります。トップコンポーネントに設定するので、index.tsxを次のように編集しましょう。/></Provider>,document.getElementById('root'))Providerとstoreを読み込んで、Appコンポーネントを囲む部分を追記しています。ここまでは基本そのまま使う部分だと思いますので、こういうものだと思って進めていきましょう。createSlicecreateSliceという機能を使うことで、State、Reducer、Actionを一気に作成することができます。今回はmodulesというディレクトリを作りその中にtasksModule.tsファイルを作成しました。tasksModulenameこのcreateSliceを識別するための名前を付けます。initialStateステートの初期データを入れます。ここではあらかじめ作成したinitialStateをそのまま入れてます。reducersステートを変更する為の処理はここに書きます。各コンポーネントで書いていた関数をこちらに移動しましょう。ここで設定する関数は、第一引数にstateを受け取り、実行時に渡した引数は第二引数にactionとして受け取ります。実際の値はaction.payloadで取り出します。設定したReducerはtasksModule.actions.addTask()で実行できます。コンポーネントで使いやすいようにtasksModule.actionsでエクスポートしておきましょう。このようにすることでコンポーネントからaddTask()だけで実行できるようになります。作成したら先ほど空だったrootReducerに入れておきましょう。tasksModule.reducer})コンポーネントからステートにアクセスするcreateSliceで作成したステートにアクセスするには、react-reduxのuseSelectorを使います。TaskListコンポーネントのtasksを置き換えてみましょう。この部分はPropsで受け取っていましたので、Propsは必要なくなりました。'登録されたTODOはありません。TaskListコンポーネントの関数をActionに置き換える次はコンポーネントの書いていた関数をcreateSliceで作成したActionに置き換えます。タスクの登録処理を書いていたTaskInputから編集します。Actionはdispatchの引数に入れることで実行できます。react-reduxのuseDispatchでdispatchを使えるようにしましょう。handleSubmitの処理の部分はReducerに移したので、その部分をdispatch(addTask(inputTitle))に変更します。className="inner"><inputtype="text"className="input"value={inputTitle}onChange={handleInputChange}placeholder="TODOを入力してください。TaskInput次はTaskItemコンポーネントの関数をdoneTaskとdeleteTaskアクションに変更します。やってることはTaskInputとほとんど変わらないですね。TaskItemPropsが必要なくなったのでApp.tsxも編集しておきましょう。Toolkitなら入りやすいのではないでしょうか。公式ツールでとことん楽をする。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。