20210703 TIL


redux-actions


action creatorとreduceのライブラリを容易に宣言および符号化できます.
既存のaction creatorは、返す必要があるオブジェクトを1つずつ符号化しています.actionの数に応じて作成する必要があるオブジェクトが増加し、redux-actionsのcreateAction()およびcreateActions()を使用して簡単に作成できます.
import {createAction} from 'redux-actions';

const LOG_IN = "LOG_IN";

const logIn = createAction(LOG_IN, (user) => ({user}));

// or
import {createActions} from 'redux-actions';

const LOG_OUT = "LOG_OUT";
const { logIn, logOut } = createActions({
  LOG_IN: (user) => ({user}),
  LOG_OUT: (user) => ({user})
});
既存のreducerはaction.typeをswitch-case文に分割し、タスクを処理します.
reduceは次のように符号化できます.
import {handleActions} from "redux-actions";

export default reducer = handleActions({
  LOG_IN: (state, action) => { action.payload.id ... },
  LOG_OUT: (state, action) => { ... },
  [COUNT_DOWN, DECREASE]: (state, action) => { ... },
}, { isLogin: false, count: 0 });
既存のreduceではactionから受信したデータはaction.blahblahであるが、handleAction()を用いてaction.payload.blahblah形式のデータを得ることができる.handleActions()の第2因子はinitialState値である.handleActions()の1番目のパラメータであるオブジェクトのキーを配列に結合し、複数の動作タイプに対して同じ処理を行うことができる.

Immer(野郎!)


リカバリステータスを変更しないライブラリ.
setStateを使用するか、reduceのreduceで返すと、常に前のstateをコピーし、新しいstateを作成して上書きします.reactを初めて勉強した入門者にとって、この仕事はとても面倒です.一般的なJavascriptの変数を変えるように、Stateも同じ方法で変えるととても便利になります.これらの機能を実現したのはImmerなどの不変性管理ライブラリであるといえる.
import { produce } from 'immer';

export default reducer = handleActions({
  INCREASE: (state, action) => produce(state, (draft) => {
    draft.count += 1
  }),
}, { count: 0 });
stateのレプリカ(draft)を作成し、レプリカを修正してstateに適用する方式だそうです.内部でproxyを使ってgeneratorと一緒に勉強しましょう