メインコンテンツまでスキップ

「React」タグの記事が1件件あります

全てのタグを見る

· 約9分
arasan01

勉強メモ

参考資料は公式のドキュメント、特に新規の話はない

https://beta.reactjs.org/learn/passing-data-deeply-with-context

https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context

Reducerとは

そもそもReducerを使うメリットを考えると状態と操作は同時に存在することが前提になることが多い。例えば(loading: Bool, fetchedData: [String])のような状態を考える。useStateだけを使った場合には[ids, setIds]のようなものとこれをよしなに処理する関数を複数用意することになる場合が多い。これをギュッと値を変えるという考えで作るとuseReducer("ギュッと値を変える処理をまとめたもの", "変えていく値の初期値")のようになる。使うときにはdispatch({type: "ギュッと値を変える処理をまとめたときに付けた処理のキー", p1: "何かしらの付随する値、パラメータとか", p2: "これ移行も付随する値とか", ...})のように書けば値を変更するパターンと変更に利用する値という入力の関係がまとまり出力はその処理のキーによって返却する値になる。Reducerはreduceの概念をベースに作っているのでデータ構造は処理として一貫しているとよい。つまりReducerに初期値として(Bool, [String])のようなデータ構造を入れたとしたらどのような処理をしてもreducerの中で返す値はこの構造は変えないようにする。