Question

在redux-actions中使用handleActions创建减速器的更好方法是： 1.为每个CRUD操作（如添加数据，删除数据）创建化简器并将其组合。在这种情况下如何设置initialState？ 2.在一个化简器中设置动作（例如，fetchDeleteDataRequest，fetchDeleteDataSuccess，fetchAddDataRequest，fetchAddDataSuccess）？

Answer 1

您可以使用精简减速器和/或普通减速器来添加或删除所需的数据。如果您正在考虑为添加和删除执行单独的操作，则需要保持数据的一致性。但是理想的方法是使用通用功能来处理CRUD操作，因为这样可以减少所需的代码量，但同时也需要一种区分它们的方法（也许绕过一些变量 ADD 或删除）。让我们考虑一下要添加或删除的项目。该列表可以是开头（ initialState ）的空数组，并将其作为props传递给组件。

操作

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

减速器

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

这只是一个示例，您可以按照以下步骤操作以避免代码重复。

如何使用Redux Reducer和服务器API

1 个答案: