全般
Redux Tool Kit
Reduxの学習コストが高いことをみてReduxの開発チームが2019年10月にリリースしました。これを使うことで簡単にReduxを導入することが可能になります。
Redux Tool Kitのコマンド一つでRedux & Hooks & TypeScriptの環境が整います。ReduxのStoreをsliceという単位に分割します。
特徴
各種ライブラリを内蔵している。
- Immer
- redux thunk
- reselect
slice
Storeを分割した一つの単位です。アプリケーションの機能ごとに一つ作ります。(例えば、ログイン機能用のslice、TODO機能用のsliceなど)sliceは一つのReducerを持ちます。
イメージ的には、従来のReduxにあった「Reducer + state + action Creator」のようなもの。
イメージ図
createSlice
sliceを作成します。これを使うと初期値と、action creatorとReducerの生成を一発で行ってくれる。
configureStore
ReduxのStoreに作成したsliceを登録します。裏側でcombineReducerが働いていて複数のsliceを結合させてStoreを作成します。
useDispatch
actionをReduxのStoreの中に伝達します。
useSelect
ReactのコンポーネントからReduxのstateを直接参照することが可能です。
ユーティリティ
typescript-fsa
定義支援ライブラリ。TypeScriptでのActionの定義をしてくれる。
redux-actions
redux-actionsというライブラリを使うことで下記のように簡潔に記述できるようになり実務ではこちらの書き方が使われていたりします。
Actions側
createActionsでAction-Creatorの記述を楽にできます。
1 2 3 4 5 6 |
import { createActions } from 'redux-actions' export const Actions = createActions( {aMethod: (args) => (args)}, {bMethod: (args) => (args) }, ) |
Reducer側
下記のようにReducerを簡潔に記述することができるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { handleActions } from 'redux-actions' import { Actions } from './Actions' //作成したActionsを読込 const initialState = { value: null, } export const reducer = handleActions({ [Actions.aMethod]: (state, action) => ({ ...state, value: action.payload, }), [Actions.bMethod]: (state, action) => ({ ...state, value: action.payload, }), }, initialState) export default combineReducers({ reducer }); |
非同期処理関連
以下が2大ライブラリです。従来のReduxを導入する場合は下記のどちらかを使うのが普通でした。しかし、RTKを導入すればこれらのライブラリを導入しなくても非同期処理を実装できるようになりました。
redux-thunk
RTKにはデフォルトで組み込まれているので設定しなくても良くなっている。
redux-saga
immutable系
immer
immutablejs
キャッシュ関連
reselect
dispatchする関数をキャッシュして、再レンダリング時に計算結果をキャッシュできる。
最近はRTK(reselctを中に含んでいる。)の登場によって組み込まれている。
実装
reduxのstateの値を使ってコンポーネント内で関数を作った場合は、stateの値が更新されるたびに処理が動いてしまう。
1 2 3 4 5 6 7 8 |
import { createSelector } from 'reselect'; const 対象とするstate = state => state.対象とする項目 export const 処理された結果 = createSelector( [対象とするstate], //inputSelectorsと呼ばれるらしいです。 処理内容(フィルターなど) //resultFuncと呼ばれるらしいです。 ) |
これ(処理された結果)を個別コンポーネント(container component)からimportして使います。
利点
一度実行した関数はキャッシュしてくれる。
通常のstateの値をそのまま使用する場合に比べてキャッシュされるので対象のstateに更新がなければ際実行されることがなくパフォーマンスがよくなります。
注意点
ただ、reselectのメモ化にも少なからず負荷はかかるものなので、Storeの値をただそのまま取り出すだけであれば無理に使う必要はないと思います。抽出した値に何かしら加工する場合のみreselectを使うようにしましょう。
フォーム関連
redux-form
React + Reduxでフォーム画面を作成する際に便利なReduxのライブラリです。
インストール
1 |
yarn add redux react-redux redux-form |
導入
Reducersに導入します。
1 2 3 4 5 6 7 8 |
import { combineReducers } from "redux"; import { reducer as formReducer } from "redux-form"; const reducer = combineReducers({ form: formReducer }); export default reducer; |
formik
フォームの状態管理やバリデーションが行えるライブラリ。最近はredux Formに負けず劣らず人気が上がってきているらしい。
React Hooks Form
onSubmit時にバリデーションを行わせてキーストロークごとのstateの更新を無くしてパフォーマンスをよくしている。もし、リアルタイムバリデーションが必要なければ選択肢に入る。
この記事へのコメントはありません。