カテゴリー：Redux
-
個別のReducerのみをテストする場合 通常の例 [crayon-6332445f6007c408247104/] ExtraReducerの場合 非同期の結果が失敗した場合と成功した場合などで様々なケースでテストケースを記述する…
-
なぜか？ ReduxはAction Creatorによって生成されたアクションをStoreにディスパッチすることで単純な更新を行っているためです。そこで、Redux-thunkのようなミドルウェアを導入することでStoreの機能を拡張して…
-
【Redux】「正規化」について
09.11
例えば、以下のようなデータがあるとしましょう。 [crayon-6332445f609d4909385779/] 以下のデータが複数回繰り返し出てきているので正規化されていないデータと言えます。 [crayon-6332445f609…
-
【React/Redux】良い構成
09.10
共通関数 共通View向けの関数(stateのfilterなど） コンポーネントに直接記述するのではなく、以下の理由でRedux Tool KitのSliceの中に記述することが望ましいです。 各ビューで使いまわせるため。 これはそ…
-
【React】APIへの非同期処理の書き方総論
07.25
Hooksでstate管理する場合 useEffectか、onClickのハンドラの中に非同期処理を置くのが普通です。 Reduxでstate管理する場合 redux-thunkだとaction-creatorが大きくなるので、少し複…
-
【Redux】イミュータブルとは？
07.24
Reduxにおけるイミュータブルとは？ オブジェクトの状態が変わらないことです。 Reduxはミュータブルに直接値を更新してはいけないと言われています。 つまり、値を更新する際は、必ず新しいオブジェクトを生成して返しなさいとい…
-
【Redux】「Reducer」の分割単位
07.24
Reduxの分割単位 レンダリングツリーごとの分割 画面ごとに分割をすること。 [crayon-6332445f60d89300570239/] ドメインデータごとの分割 商売、ログインなどの業務ごとに分割すること。 [cray…
-
【Redux】仕組み
07.24
stateで保持している状態を渡す。 Reduxストアの状態を渡すためにコンテキストを使うのではなく、更新のチェックをするためにReduxストアへのサブスクリプションのためにコンテキストを使用する。 常に同じコンテキスト値を…
-
今はHooksが使える時代なのであまりこの考え方はしないようになってきていますが、過去の案件のソースとかを読む場合に知っておくと良い概念かと思いましたので、まとめておきます。 Reduxを使うにあたってどのようにコンポーネントを分ける…
-
【Redux】新しいStoreとの接続方法
07.22
2019年にReact Hooksが登場して、Reduxもv7.1.0になりReact Hooksに対応したReduxのStoreに接続する方法が増えました。 従来の書き方 connect関数を使う。 新しい書き方 useSelec…