React Redux 没有返回预期状态答案

【问题标题】：React Redux doesn't return expected stateReact Redux 没有返回预期状态
【发布时间】：2020-11-11 17:45:04
【问题描述】：

我在后端（节点、MongoDB）上有一个类似的函数，它返回给定的帖子，并更新了likes 计数器。这行得通，用 Postman 测试过。这只是一个具有一堆属性的对象，例如likes、_id.、by、createdAt 等等......

let p = await Post.findById(req.params.id).populate("by");
return res.json(p);

然后我在 React 中有一个 like 操作：

export const like = (id) => (dispatch) => {
    const token = localStorage.getItem("token");
    if (token) {
        axios
            .put(`http://localhost:5000/likePost/${id.id}`, id, {
                headers: { "X-Auth-Token": token },
            })
            .then((res) => {
                dispatch({
                    type: LIKE,
                    payload: res.data,
                });
            });
    }
};

我有一个 LIKE 减速器：

case LIKE:
   return {
      ...state,
      posts: state.posts.map((p) => {
         return { ...p };
   }),
};

LIKE 减速器在我单击按钮时触发，在后端我可以看到更新，但在客户端它不会更新。我使用redux-logger 并且posts 状态没有更新。

我做错了什么？我认为传播所有帖子（...p）会更新它，因为它是在后端更新的。

【问题讨论】：

您正在使用该州帖子的旧数据。您必须使用 action.payload 字段来更新您所在州的帖子键。
你派发你的类型LIKE，但是payload怎么办？您必须使用 payload 来获取您的新帖子（从您的服务器返回）
您的最终状态将是{...state, posts: {...state.posts, ...action.payload}。它将现有帖子与您的新帖子action.payload 合并并更新posts 状态。
action.payload 是来自服务器的res.data。那只是一个对象，更新的post 和更新的likes。而posts 是我所在州的一个数组。那么我需要从服务器返回所有帖子吗？
{...state, posts: {...state.posts, ...action.payload} 几乎可以工作，我收到一个错误，因为在现在的状态下，返回的对象位于 posts 数组中，这是不应该的。旧对象（在帖子中）应替换为新对象

标签： javascript node.js reactjs mongoose redux

【解决方案1】：

这个有效：

          case LIKE:
            return {
                ...state,
                posts: state.posts.map((p) => {
                    if (p._id === action.payload._id) {
                        p.likes = action.payload.likes;
                    }
                    return p;
                }),
            };

【讨论】：