【React/Redux】よく使われるライブラリ一覧(redux-tool-kit、redux-form、reselectなど)

全般

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の記述を楽にできます。

import { createActions } from 'redux-actions'

export const Actions = createActions(
  {aMethod: (args) => (args)},
  {bMethod: (args) => (args) },
)

import { createActions } from 'redux-actions'

export const Actions = createActions(

{aMethod: (args) => (args)},

{bMethod: (args) => (args) },

)

Reducer側

下記のようにReducerを簡潔に記述することができるようになります。

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
});

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の値が更新されるたびに処理が動いてしまう。

import { createSelector } from 'reselect';

const 対象とするstate = state => state.対象とする項目

export const 処理された結果 =  createSelector(
  [対象とするstate], //inputSelectorsと呼ばれるらしいです。
  処理内容（フィルターなど） //resultFuncと呼ばれるらしいです。
)

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のライブラリです。

インストール

yarn add redux react-redux redux-form

1	yarn add redux react-redux redux-form

導入

Reducersに導入します。

import { combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";

const reducer = combineReducers({
  form: formReducer
});

export default reducer;

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の更新を無くしてパフォーマンスをよくしている。もし、リアルタイムバリデーションが必要なければ選択肢に入る。