Question

我使用ngrx作为Angular2应用程序的状态容器。现在，我有三个API调用，用于检索广告列表，部门列表以及单个部门的详细信息。您只能检索此信息。您永远无法在应用程序中更新或以其他方式操纵它。我的申请状态如下：

{
  ads: Ad[],
  departments: Department[],
  selectedDepartment: Department,
}

这很好用，我可以使用this.store.select('ads')等在我的组件中获取这些内容。一切正常。

我遇到的一个问题是，我有很多非常相似的看法简单的样板...特别适用于减速器。例如：

export const departmentsReducer = (state = [], { type, payload }) => {
  switch (type) {
    case LOAD_DEPARTMENTS:
      return state;

    case LOAD_DEPARTMENTS_COMPLETE:
      return payload;

    default:
      return state;
  }
};

我LOAD_x使用ngrx/effects通过我的服务触发从API加载数据。然后LOAD_x_COMPLETE获取从API返回的数据并更新状态容器。

创建这些减速器有没有办法减少样板量，因为它们的运行方式大致相同？唯一真正的区别是他们最终使用的API。

Answer 1

以下是官方redux文档的推荐： http://redux.js.org/docs/recipes/ReducingBoilerplate.html#generating-reducers

他们建议像这样制作一个createReducer函数：

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}

然后你可以创建reducer：

 export const todos = createReducer([], {
   [ActionTypes.ADD_TODO](state, action) {
     let text = action.text.trim()
     return [...state, text]
   }
 })

针对不同API的几乎相同的reducer

1 个答案: