カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-3

react-redux

redux は実は react のためだけのライブラリではありません。そのため redux 自体は react に対するインターフェイスを持っていません。redux の react に対するインターフェイスを提供するのが react-redux というライブラリです。

react-redux はProviderconnectという関数を持っています。

この2つは柔軟性に富んだインターフェイスを提供してくれるのですが、役割が似ていて理解を難しくする根源になっています。そこでこれら2つを違いがわかるように説明していきます。

Provider

react がどの store を使うのかを定義するためのものです。多くの場合はルート階層のコンポーネントをこのProviderでラップして、それより下のコンポーネントでその store が使えるようにします。store は単に状態が保管されている場所ぐらいの認識で大丈夫です。

重要なポイントはProviderでラップしただけではコンポーネントは store が持っている状態について知ることができないし redux に対して何もできないということです。

次に説明するconnectを使うことで初めてコンポーネントは store から必要なデータを取得したり状態の更新を redux に対して要求(= dispatch)することができるようになります。

connect

各コンポーネント単位でどの state を参照してどの dispatch を実行するのかを定義するための関数です。

高階関数になっていて、適用したいコンポーネントとどのデータを props として渡すのかを定義した関数を引数にとります。完全に理解しようとすると結構ややこしいところなので最初はおまじないと思って書き方を真似してみてください。

js
12345678
Copied!
const mapStateProps = ({ count }) => ({ count }); const mapDispatchProps = dispatch => ({ increment: count => dispatch(increment(count)), decrement: count => dispatch(decrement(count)) }); export default connect(mapStateProps, mapDispatchProps)(Counter);

これは、次の章で作成するカウンターアプリでconnectを使っているコードです。詳しくはあとで説明しますが、このように書けば props に redux の情報を渡すことができるんだという理解で大丈夫です。

なぜProviderconnectがあるのか

ここまでの、説明を見てもなぜこの二つのインターフェイスを分ける必要があるのかがピンと来ないと思います。そこで少し深くこの二つが必要な理由について説明したいと思います。

もし、connectがなくProviderだけだったとしましょう。(Providerでラップしたらどこでも state を参照可能)この場合二つの問題が生じます。

保守性が低くなる

これは、state のスコープが限定されないために起こりうる問題です。どこからでも簡単に参照できてしまうので、どこか他のところを変更したときにどこまで影響が及ぶのかが予測しづらくなります。

もしconnectがあると、state が参照できるスコープを制限することができるので、被害も最小限に抑えられます。

バケツリレーが煩雑になる

どこでも、参照できるとは言っても結局はProviderでラップされたそのコンポーネントしか状態について知ることはできないので、それ以下のコンポーネントに関してはバケツリレーをしていくしか解決法がありません。

これでは、そもそも redux を使わなかったパターンと変わらないので、やはりconnectは必要なのです。

ここまでで、react-redux についての説明は終わりです。次から簡単な redux のアプリを作ってみて redux の理解を深めましょう。

現在のパート (2)
全パート (68)
みんなで助け合おう!
現在のパートのディスカッション 全2件
1-3
Yuta Hirano 2022-08-16
質問でなく失礼します

Redux と hooks (Context) のユースケースについて

※教材がReduxを教えるためのものだということを理解した上でお伺いさせてください。

本教材にてReduxを使っていらっしゃいますが、プロジェクトでReduxを使うかhooksだけでいくかの判断について知見が広い先生にお伺いしたいです。

今回のカレンダーアプリのような場合、Reduxを使うと良い大きなポイントなどありますでしょうか?
また、今回のケースで「Hooksだとこの箇所は実装は複雑化しやすい」などあれば是非教えていただけたら幸いです。

非同期処理もuseContextとuseReducerあたりを使うと良いのかなと想像したので、判断の基準として使わせていただけたらと考えております。

1-3
のっち 2020-03-02
質問です

購入させていただき楽しく勉強しております!
一応、誤字について報告です。
首悪の根源→諸悪の根源
解決方→解決法