从响应数据更新 Redux 状态答案

【问题标题】：Updating Redux State from response data从响应数据更新 Redux 状态
【发布时间】：2020-11-03 12:18:19
【问题描述】：

我的 React 应用程序有一个登录/注册系统。

我想将user 状态设置为fetch 之后收到的响应。代码看起来像这样 -

export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {
      fetch("http://localhost:5000/user/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(action.payload),
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          console.log(data);
          state.user = data;
        });
    },
  },
});

一切正常，直到我添加行 state.user = data ，之后我收到一条错误消息 -

未处理的拒绝 (TypeError)：无法在已撤销的代理上执行“设置”

我做错了什么？

提前致谢。

【问题讨论】：

标签： javascript node.js reactjs web redux

【解决方案1】：

你不能直接改变状态。 reducer 是一个函数(state, action) => newState，您必须在其中返回新状态而不改变旧状态。

例如：return {...state, user: data }

但是您可以查看另一种选择：immer，它可以让您更改克隆的状态草稿。

但这里的另一个问题是，您不应该在 reducer 中获取数据。所谓的取数据之类的副作用应该在外面。

redux-thunk 是一个很好的框架。

【讨论】：