如何使用Redux reducers和服务器API

Question

在redux-actions中使用handleActions创建reducers的更好方法是: 1.为每个CRUD操作(如添加数据、删除数据)创建reducers，并将其合并。在这种情况下如何设置initialState ? 2.在一个reducer中设置操作(举例说明fetchDeleteDataRequest，fetchDeleteDataSuccess，fetchAddDataRequest，fetchAddDataSuccess )？

Answer 1

您可以使用特定的缩减程序和/或常用的缩减程序来添加或删除由您决定的数据。如果您正在考虑对、add和执行单独的操作，则需要保持数据的一致性。但拥有一个处理CRUD操作的通用函数是理想的，因为这将减少您必须使用的代码量，但是您还需要一种方法来区分它们(可能绕过一些变量、添加或删除)。让我们考虑一下要添加或删除的项目列表。该列表可以是开始(initialState)中的空数组，并将其作为道具传递给组件。

操作

export const addDeleteItem = data => dispatch => {
  // you can perform REST calls here
  dispatch({
    type: ADD_REMOVE_DATA,
    payload: data
  });
};

Reducers

let initialState = {
 items:[]
}

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_REMOVE_DATA:
      if(action.payload.event === 'ADD'){
        return {...state,items:[...state.items,action.payload.item]}
      }else if(action.payload.event === 'DELETE'){
        return {...state,items:state.items.filter(item=>item.id !== action.payload.item.id)}
      }else if (action.payload.event === 'UPDATE'){
       //handle your update code
      }
  }
}

这只是一个例子，你可以按照下面的方法来避免代码重复。