教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
redux は実は react のためだけのライブラリではありません。そのため redux 自体は react に対するインターフェイスを持っていません。redux の react に対するインターフェイスを提供するのが react-redux というライブラリです。
react-redux はProvider
とconnect
という関数を持っています。
この2つは柔軟性に富んだインターフェイスを提供してくれるのですが、役割が似ていて理解を難しくする根源になっています。そこでこれら2つを違いがわかるように説明していきます。
Provider
react がどの store を使うのかを定義するためのものです。多くの場合はルート階層のコンポーネントをこのProvider
でラップして、それより下のコンポーネントでその store が使えるようにします。store は単に状態が保管されている場所ぐらいの認識で大丈夫です。
重要なポイントはProvider
でラップしただけではコンポーネントは store が持っている状態について知ることができないし redux に対して何もできないということです。
次に説明するconnect
を使うことで初めてコンポーネントは store から必要なデータを取得したり状態の更新を redux に対して要求(= dispatch)することができるようになります。
connect
各コンポーネント単位でどの state を参照してどの dispatch を実行するのかを定義するための関数です。
高階関数になっていて、適用したいコンポーネントとどのデータを props として渡すのかを定義した関数を引数にとります。完全に理解しようとすると結構ややこしいところなので最初はおまじないと思って書き方を真似してみてください。
js12345678 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 の情報を渡すことができるんだという理解で大丈夫です。
Provider
とconnect
があるのかここまでの、説明を見てもなぜこの二つのインターフェイスを分ける必要があるのかがピンと来ないと思います。そこで少し深くこの二つが必要な理由について説明したいと思います。
もし、connect
がなくProvider
だけだったとしましょう。(Provider
でラップしたらどこでも state を参照可能)この場合二つの問題が生じます。
これは、state のスコープが限定されないために起こりうる問題です。どこからでも簡単に参照できてしまうので、どこか他のところを変更したときにどこまで影響が及ぶのかが予測しづらくなります。
もしconnect
があると、state が参照できるスコープを制限することができるので、被害も最小限に抑えられます。
どこでも、参照できるとは言っても結局はProvider
でラップされたそのコンポーネントしか状態について知ることはできないので、それ以下のコンポーネントに関してはバケツリレーをしていくしか解決法がありません。
これでは、そもそも redux を使わなかったパターンと変わらないので、やはりconnect
は必要なのです。
ここまでで、react-redux についての説明は終わりです。次から簡単な redux のアプリを作ってみて redux の理解を深めましょう。
※教材がReduxを教えるためのものだということを理解した上でお伺いさせてください。
本教材にてReduxを使っていらっしゃいますが、プロジェクトでReduxを使うかhooksだけでいくかの判断について知見が広い先生にお伺いしたいです。
今回のカレンダーアプリのような場合、Reduxを使うと良い大きなポイントなどありますでしょうか?
また、今回のケースで「Hooksだとこの箇所は実装は複雑化しやすい」などあれば是非教えていただけたら幸いです。
非同期処理もuseContextとuseReducerあたりを使うと良いのかなと想像したので、判断の基準として使わせていただけたらと考えております。