カテゴリー：Redux
-
個別のReducerのみをテストする場合 通常の例 [crayon-6787400fc49bb208471573/] ExtraReducerの場合 非同期の結果が失敗した場合と成功した場合などで様々なケースでテス…
-
09.11
【Redux】「正規化」について
例えば、以下のようなデータがあるとしましょう。 [crayon-6787400fc4fb3244261755/] 以下のデータが複数回繰り返し出てきているので正規化されていないデータと言えます。 [crayon-6787400fc4f…
-
今はHooksが使える時代なのであまりこの考え方はしないようになってきていますが、過去の案件のソースとかを読む場合に知っておくと良い概念かと思いましたので、まとめておきます。 Reduxを使うにあたってどのようにコンポーネントを分ける…
-
07.22
【Redux】新しいStoreとの接続方法
2019年にReact Hooksが登場して、Reduxもv7.1.0になりReact Hooksに対応したReduxのStoreに接続する方法が増えました。 従来の書き方 connect関数を使う。 新しい書き方 useSelec…
-
各コンポーネントからuseDispatchなどでRedux Tool Kit内のReducer関数を呼び出したり、useSelectorでstateを参照したりすると思いますが、RTK独自の構文になるのでRenderでそのまま呼び出そうとし…
-
Reduxで非同期の場合のSliceの作り方は下記のようになります。 [crayon-6787400fc5802727579047/] createAsyncThunk 従来のreduxだとredux-thunkなどのミドルウェアで行…
-
インストール デフォルトでReactのアプリケーションと同時にRedux Tool Kitのテンプレートを導入できます。 [crayon-6787400fc5b38780157117/] 起動 [crayon-6787400fc5b…
-
全般 Redux Tool Kit Reduxの学習コストが高いことをみてReduxの開発チームが2019年10月にリリースしました。これを使うことで簡単にReduxを導入することが可能になります。 Redux Tool Kitの…
-
Hooks メリット Reactの標準機能なので導入が楽。 useReducerのReducer関数は純粋なJavaScriptのコードなので単体テストが楽 デメリット 全てのReducerを一つのSt…
-
redux-sagaとは？ Reduxにタスクという概念を持ち込むためのライブラリです。Redux-sagaに依頼することで間接的にタスクを実行してくれます。 仕組み 非同期処理を別々のスレッド（タスク）のイベントループのように切り出…
