20210703 TIL
8581 ワード
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と一緒に勉強しましょう
Reference
この問題について(20210703 TIL), 我々は、より多くの情報をここで見つけました
https://velog.io/@bandor/20210703-TIL
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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})
});
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 });
リカバリステータスを変更しないライブラリ.
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と一緒に勉強しましょうReference
この問題について(20210703 TIL), 我々は、より多くの情報をここで見つけました https://velog.io/@bandor/20210703-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol