Question

在redux中，我如何根据作为字符串传递给动作创建者的api调用来动态地减速器以减少样板（因此对于每个api调用，商店内都有一个专用键）？我是否应该尝试这样做？

问题在于：

export function universalFetchReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCHING_DATA' + action.metadata:
      return {
        ...state,
        isFetching: true
      };
    case 'FETCHING_DATA_SUCCESS' + action.metadata:
      return {
        ...state,
        isFetching: false,
        data: action.data,
        dataFetched: true
      };
    case 'FETCHING_DATA_FAILURE' + action.metadata:
      return {
        ...state,
        isFetching: false,
        error: true
      };
    default:
      return state;
  }
}

现在我可以根据传递给动作创建者的网址创建动作及其名称，但不能制作专用的减速器。

Answer 1

使用redux-injector解决了这个问题，然后使用api创建了一个动作创建器和一个简单的异步动作创建器（使用了axios）：

export function getData(api) {
  return {
    type: `FETCHING_DATA_${api}`,
    meta: api
  }
}

export function universalFetchData(api) { 
  injectReducer(`universalFetch${api}`, universalFetchReducer);
  return dispatch => {
    dispatch(getData(api)) //Some initial action. Pass api to name actions
    axios
      .get(api)
      .then(response => {
        dispatch(getDataSuccess(response.data, api)) //Some success action
      })
      .catch(error => getDataFailure(error.response.status, api))   } } //Some failure action

然后从组件中激发了一个universalFetchData（'path_to_api'）并在redux-devtools中获得FETCHING_DATA_path_to_api动作。

从商店获取数据 state.universalFetchReducer_path_to_api 并传递此状态以使用例如渲染ramda的pathOr设置未知的初始状态。

获得的经验教训：您将能够快速地进行许多简单的延迟加载api调用，但只有在您知道所获得的数据时才能执行此操作。对于更危险的逻辑，请提前使用常规减速器。这个解决方案无法接受，但它可以完成工作。

动态生成reducer（api调用的通用reducer）

1 个答案: