Hooks-useReducer

useReduces 是useState的替代方案。

const [state, dispatch] = useReducer(reducer, initialArg, init);

当state逻辑复杂且包含多个子值的时候，useReducer会比setState更适用。

可以使用dispatch发起一个动作，state可以获取到最新的值。

function reducer(state, action) {
  switch (action.type) {
    case 'setAssetsType':
      return {
        assetsType: action.payload.map((x) => ({
          label: x.fundTypeName,
          value: x.id,
        })),
      };
    default:
      throw new Error();
  }
}

const Edit = (props) => {
  const [state, dispatch] = useReducer(reducer, {});

  // 获取资产类型
  getAssetsType().then((res) =>
    dispatch({ type: 'setAssetsType', payload: res }),
  );
};

复杂的 redux 方案

/reducer/assets.js

import { createAction, handleActions } from 'redux-actions';

const SET_ASSETS_TYPE = 'SET_ASSETS_TYPE';

export const setAssetsType = createAction(SET_ASSETS_TYPE);

export default handleActions(
  {
    [SET_ASSETS_TYPE]: (state, action) => {
      const { payload } = action;

      return {
        ...state,
        assetsType: payload,
      };
    },
  },
  {
    assetsType: [],
  },
);

reducer/index.js

import { combineReducers } from 'redux';
import assets from './assets';

export default combineReducers({
  assets,
});

页面组件：每个 connect 的包装组件都会订阅（subscribe） store 的变化，并在变化时触发 render

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { setAssetsType } from 'ROOT/reducer/assets';

const mapState = ({ assets }) => ({
  assetsType: assets.assetsType,
});
const mapActions = (dispatch) => ({
  actions: bindActionCreators(
    {
      setAssetsType,
    },
    dispatch,
  ),
});

const List = ({ actions, assetsType }) => {
  // 获取资产类型
  getAssetsType().then((res) => {
    const options = res.map((x) => ({ label: x.fundTypeName, value: x.id }));
    actions.setAssetsType(options);
  });
};

export default connect(mapState, mapActions)(List);