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

【问题标题】：Generate reducers dynamically (universal reducer for api calls)动态生成reducer（用于api调用的通用reducer）
【发布时间】：2018-02-23 11:06:07
【问题描述】：

在 redux 中，如何根据作为字符串传递给 action-creator 的 api 调用动态地制作 reducer，以减少样板文件（因此对于每个 api 调用，商店内都有一个专用键）？我什至应该尝试这样做吗？

例如jsfiddle

问题出在这里：

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;
  }
}

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

【问题讨论】：

您想要一个 reducer 来处理所有从 api 请求数据的操作？
@Galupuf 是的，但不完全是，我想为每个单独的 api 调用创建一个专用的减速器（动作名称和减速器函数/存储对象基于调用名称/元数据）并将其注册到商店。如果那是常见的事情，以某种 lib、npm 包等的形式。我认为为每个 api 调用创建一个 action/action-creator/reducer 有点多余，因为它每次只是一个唯一的调用。我只找到了动态存储代码拆分的解决方案，但这是另一种情况。如果这是一个不好的做法，那么我会继续前进。

标签： reactjs ecmascript-6 redux

【解决方案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 调用，但只有在您知道要获取什么数据的情况下才能执行此操作。对于更危险的逻辑，请预先使用常规减速器。这个解决方案几乎不能接受，但它可以完成工作。

【讨论】：