Redux]action、reduce、dispatchの作成が簡単

アクション作成関数の作成が容易

createAction

これは、アクション生成関数の作成を支援するより簡単な関数です.

既存のアクション作成関数

const CHANGE_INPUT = 'waiting/CHANGE_INPUT'; // 인풋 값 변경
const CREATE = 'waiting/CREATE'; // 명단에 이름 추가
const ENTER = 'waiting/ENTER'; // 입장
const LEAVE = 'waiting/LEAVE'; // 나감

// **** FSA 규칙을 따르는 액션 생성 함수 정의
export const changeInput = text => ({ type: CHANGE_INPUT, payload: text });
export const create = text => ({ type: CREATE, payload: text });
export const enter = id => ({ type: ENTER, payload: id });
export const leave = id => ({ type: LEAVE, payload: id });

動作生成関数はFSAルールに従います.
必要なのは.
1.純JavaScriptオブジェクト.
2.type値が必要です.
選択的に

のペイロード、error、metaの値がある可能性があります.

ペイロード転送動作で使用するパラメータ.
上記の例では、createまたはchangeInputはテキスト値を受信する必要があるため、パラメータとしてのテキストをペイロード値として指定します.
createAction関数を使用する場合は、タイプと負荷を指定する必要はありません.
1番目のパラメータはtype、2番目のパラメータはペイロードCreatorを受け入れます.

既存のアクション作成関数export const changeInput = text => ({ type: CHANGE_INPUT, payload: text });

createAction関数を使用する場合export const changeInput = createAction(CHANGE_INPUT, text => text);

リライタのシンプル化

handleActions

switch、case文を使用せずに、各動作タイプがupdata関数を実現する方法.
読みやすさは良いとはいえよくわかりません

export default handleActions(
  {
    [CHANGE_INPUT]: (state, action) => ({
      ...state,
      input: action.payload,
    }),
    [CREATE]: (state, action) => ({
      ...state,
      list: state.list.concat({
        id: action.payload.id,
        name: action.payload.text,
        entered: false,
      }),
    }),
    [ENTER]: (state, action) => ({
      ...state,
      list: state.list.map(
        item =>
          item.id === action.payload
            ? { ...item, entered: !item.entered }
            : item
      ),
    }),
    [LEAVE]: (state, action) => ({
      ...state,
      list: state.list.filter(item => item.id !== action.payload),
    }),
  },
  initialState
);

dispatch:mapDispatchToPropsの方が簡単

bindActionCreators

既存

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement()),
});

bindActionCreators

const mapDispatchToProps = dispatch =>
  bindActionCreators({ increment, decrement }, dispatch); // **** (2) bindActionCreators 사용.

Reference

https://velog.io/@velopert/Redux-3-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%A5%BC-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-nvjltahf5e