-
【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-61025e9d623a4342758457/] ドメインデータごとの分割 商売、ログインなどの業務ごとに分割すること。 [cray…
-
combineReducersとは？ ReduxのReducerは関心ごとごとに分割し、Reducerごとに別々の名前空間で処理が実行させることができるイメージ。 それらのReducerを統合する。 combineReducers…
-
【Redux】仕組み
07.24
stateで保持している状態を渡す。 Reduxストアの状態を渡すためにコンテキストを使うのではなく、更新のチェックをするためにReduxストアへのサブスクリプションのためにコンテキストを使用する。 常に同じコンテキスト値を…
-
【React】レンダリングの仕組み
07.24
Reactのレンダリングの流れ レンダーフェーズ ルートのコンポーネントから更新が必要なコンポーネントを見つけるために下方にループします。（更新が必要なコンポーネントはフラグが立っています。） 更新が必要なコンポーネントを…
-
【React】「HOC」について
07.24
HOC(Heigher-Order-Component)とは？ 高階コンポーネント コンポーネントを引数にとりコンポーネントを返す関数 react-reduxのconnect関数やReact.memoはHOCです。 …
-
今はHooksが使える時代なのであまりこの考え方はしないようになってきていますが、過去の案件のソースとかを読む場合に知っておくと良い概念かと思いましたので、まとめておきます。 Reduxを使うにあたってどのようにコンポーネントを分ける…
-
【Redux】新しいStoreとの接続方法
07.22
2019年にReact Hooksが登場して、Reduxもv7.1.0になりReact Hooksに対応したReduxのStoreに接続する方法が増えました。 従来の書き方 connect関数を使う。 新しい書き方 useSelec…
-
redux-actions redux-actionsというライブラリを使うことで下記のように簡潔に記述できるようになり実務ではこちらの書き方が使われていたりします。 Actions側 createActionsでAction-Cre…