プログラムReduxをReactで使うときは、react-reduxを使うんだよ!と講座で教わり、以降何も考えずにreact-reduxを使ってきた。connect()の書き方がよくわかんねえよ!とか、Reduxの非同期処理がわかんないよ!とか、いろいろありつつも、今回はそもそもreact-reduxってなんで必要なんだっけ?みたいなところを改めて整理しようと思う。react-reduxがある世界react-reduxがない世界storeを渡すreact-reduxがある世界まずはいつも通り、react-reduxを使ってTodoリストをつくってみる。最低限の機能でこんなかんじに。codesandbox.ioTodoリストは、Todoを追加するAddTodoとTodoの一覧を表示するTodoListのコンポーネントの二つのコンポーネントで構成されている。document.getElementById("root"));いずれも、react-reduxを用いて、コンポーネント内で、Reduxのdispatchや、Reduxのstateを参照してる。次に、react-reduxを使わないで、Reduxをつかってみる。storeを渡すcreateStoreでstoreをつくったところで、早速手が止まります。あれ、コンポーネントからstoreをどうやって参照すればいいのかな、と。document.getElementById("root"));react-reduxのコードを眺めて見ると、ReactのContextの機能をつかっていることがわかりました。Contextを使ってコンポーネントにstoreを渡すことにします。Contextはほとんどつかったことがないのであんまりよくわかってないので説明は割愛します。コンテキスト作成します。React.createContext();作成したコンテキストを読み込み、Providerで配下のコンポーネントに渡すようにします。rootElement);そしたら、コンテキストを参照するコンポーネントから、コンテキスト経由でstoreを受け取ります。}}AddTodo、TodoListコンポーネントでは、プロパティ経由でstoreを渡すので、store.dispatchが使えます。AddTodo;TodoListのほうも、store.getState()でReduxのステートを取得することができますね。TodoList;ここまでのコードを参考までに貼っておきます。codesandbox.ioが、このままではテキストボックスからTodoを追加しても、画面に表示されません。いうもの、Reactはstateかpropsの更新があった場合にコンポーネントが再レンダリングされます。store.dispatchをすることで、ステートの状態がかわってはいるのですが、storeオブジェクトの中身がかわったかどうかをReactは検知することができません。immutable原則ってやつですね。dispatchをしたら、Reactに再レンダリングをしてねという仕組みを実装する必要があります。dispatchをしたら、という部分ですが、Reduxに標準で用意されているstore.subscribeを利用することができます。redux.js.org続いて、Reactに再レンダリングさせるために、propsやstateを用意して、更新させてもよさそうなのですが、ここでは明示的に再レンダリングさせるforceUpdateを使うことにします。}}これで、やりたいことができました。コンポーネントを受け取ってMyContext.Consumerの部分をつけて返すような関数を使うとreact-reduxのconnectのようなイメージになりそうですね。実際のreact-reduxでは、パフォーマンス等いろいろな点が考慮されているとのことなので、今回のような実装は行うことはないかと思いますが、すこしだけreact-reduxがやっていることをイメージできるようになりました。15:48react-reduxを学ぶ関連記事2019-02-05redux-thunkを学ぶReduxに慣れ始めたのであらためてredux-thunkをちゃんと理解し...2019-01-28jestで特定のモジュールのみmockにするこっちでもmockの話を書いた。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。