redux 错误：固定失败：在路径“emailReducer.emails.0”中检测到分派之间的状态变化

3ks5zfa0 于 2022-11-24 发布在其他

关注(0)|答案(3)|浏览(121)

我收到这个关于改变状态的错误消息，但是Redux Toolkit的目的是改变状态，所以我很困惑...
该错误来自addNewEmail，我在其中使用useSelector将新电子邮件添加到调用prevEmails的数组中，第二个参数是常规字符串。

import { createSlice } from "@reduxjs/toolkit";
import { AppThunk } from "./store";

const initialState = {
   emails: [],
};

export const emailSlice = createSlice({
   name: "email",
   initialState,
   reducers: {
      setEmails: (state, action: any) => {
         state.emails = action.payload;
      },
   },
});

export const { setEmails } = emailSlice.actions;

export const addNewEmail = (prevEmails: any, email: string): AppThunk => (
   dispatch
) => {
   const allEmails = prevEmails.push(email);
   dispatch(setEmails(allEmails));
};

export default emailSlice.reducer;

export const selectEmails = (state: any) => state.emailReducer.emails;

redux

来源：https://stackoverflow.com/questions/64695464/error-invariant-failed-a-state-mutation-was-detected-between-dispatches-in-th

3条答案

按热度按时间

v1l68za41#

我也得到了同样的错误，这不是你如何dispatach的行动。所有你必须通过这个中间件在您的商店。

const store = configureStore({
          reducer,
          middleware: (getDefaultMiddleware) => getDefaultMiddleware({
               immutableCheck: false,
               serializableCheck: false,
          })
})

赞(0）回复(0）举报 2022-11-24

ecfdbz9o2#

正如@asaf-aviv所说，真实的的问题在于，你试图在一个异径管之外对实际上是state.emails的东西进行变异：

const allEmails = prevEmails.push(email);
   dispatch(setEmails(allEmails));

第二个问题是概念性的。你应该将动作建模为“事件”，而不是“设置者”，并将尽可能多的逻辑放入归约器中。如果你遵循这些指导方针，这个问题就不会在第一时间发生。
而且，这甚至不需要是thunk --只需分派一个包含新email对象的操作。
正确的处理方法是：

export const emailSlice = createSlice({
   name: "email",
   initialState,
   reducers: {
      emailAdded: (state, action: PayloadAction<Email>) => {
         state.emails.push(action.payload)
      },
   },
});

export const { emailAdded } = emailSlice.actions;

// later
dispatch(emailAdded(newEmail));

赞(0）回复(0）举报 2022-11-24

hujrc8aj3#

你在调度动作之前改变状态，你可以在减速器内部改变状态，但不能在减速器外部改变状态。
您可以将prevEmails.push(email)更改为prevEmails.concat(email)，这将返回一个新数组，然后您可以将其作为有效负载发送。

赞(0）回复(0）举报 2022-11-24