PUT 方法成功后更新 Redux 中的状态（axios）

Question

我想在一个action的基础上更新Redux State，如下：

export const editAction = (itemType, itemContent, id) => (dispatch) => {
  return axios.put(`${url}/${itemType}/${id}`, {
    itemType,
    ...itemContent,
  })
    .then(({ data }) => {
      console.log(data);
      dispatch({
        type: EDIT_SUCCESS,
        itemType,
        data,
        id,
      });
    })
};

我省略了 catch 块以缩短源代码。

在 EDIT_SUCCESS 操作类型之后，我应该使用什么 return 来更新 reducer 中的 Redux 状态？

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_SUCCESS:
      return {
        ...state,
        [action.itemType]: [...action.data],
      };
    case ADD_SUCCESS:
      return {
        ...state,
        [action.itemType]: [...state[action.itemType], action.data],
      };
    case EDIT_SUCCESS:
      return {
        ...state,
        // ???,
      };
    case DELETE_SUCCESS:
      return {
        ...state,
        [action.itemType]: [...state[action.itemType].filter(item => item._id !== action.id)],
      };
  }
};

我很清楚如何实现 FETCH、ADD 和 DELETE，因为我做到了（如您所见），但我不知道如何实现 return 对于 EDIT_SUCCESS.

但重要的是，在运行 editAction()（Formik 中的提交按钮）之后，数据库中的编辑对象 被更新（通过 axios）正确但状态在 Redux DevTools 中以及在浏览器中查看保持不变。只有当我刷新页面时，我才看到不同。

Answer 1

如果您编辑了一个元素，您应该查找并更新它。

类似于：

const newState = {...state};

const indexOfElementToUpdate = newState[action.itemType].findIndex(item => item._id === action.id);

newState[action.itemType][indexOfElementToUpdate] = action.data;

return newState;

PUT 方法成功后更新 Redux 中的状态（axios）

Update State in Redux after successful PUT method (axios)

put

reactjs

redux

react-redux

axios