Question

我的React App有一个登录/注册系统。

我想将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）：无法对已被撤销的代理执行“设置”

我在做什么错了？

谢谢。

Answer 1

不允许您直接更改状态。减速器是函数(state, action) => newState，在其中您必须返回新状态而不更改旧状态。

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

但是您可以签出另一种方法：immer，让您更改克隆状态草稿。

但是这里的另一个问题是，您不应该在减速器中获取数据。诸如获取数据之类的所谓副作用应该在外部。

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

从响应数据更新Redux状态

1 个答案: