React Redux - 不變失敗：在調度中檢測到狀態突變

Question

我收到此錯誤： Invariant failed: A state mutation was detected inside a dispatch似乎無法找到解決方案。 我正在通過 API 獲取用戶支持票並將其保存到狀態以顯示票信息。 這是我的代碼：

const initialState: stateType = {
    User: new User(),
    SupportTickets: new SupportTickets()
}

const userSlice = createSlice({
    name: "User",
    initialState,
    reducers: {
        setUser: (state, {payload}) => {
            state.User = payload
        },
        setSupportTickets: (state, {payload}) => {
            state.SupportTickets.tickets = payload
        }
    }
})

export const {setUser, setSupportTickets} = userSlice.actions

export const userSelector = (state: stateType) => state.User
export const userSupportTicketsSelector = (state: stateType) => state.SupportTickets

export function fetchSupportTickets(userId: string, token: string) {
    return async (dispatch: AppDispatch) => {
        return await fetch(API_URL, {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${token}`
            }
        }).then(response => {
            if (!response.ok) { throw response }
            return response.json()
        }).then(json => {
            dispatch(setSupportTickets(json))
        }).catch(error => {
            console.log('Failed to fetch support tickets', error);
        })
    }
}

interface stateType {
    User: User
    SupportTickets: SupportTickets
}

export class SupportTickets {
    tickets: SupportTicket[] = []
}

export class SupportTicket {
    id: number = 0
    type: string = ""
    subject: string = ""
    priority: string = ""
    status: string = ""
    created_at: string = ""
    updated_at: string = ""
}

我試過改變/移動東西但沒有成功。 任何幫助是極大的贊賞。 提前致謝。

Answer 1

我看到了問題。 看起來您正在創建某種類來存儲您的數據，並將它們置於 Redux 狀態：

const initialState: stateType = {
    User: new User(),
    SupportTickets: new SupportTickets()
}

您永遠不應該將類實例或其他不可序列化的值放入 Redux 狀態。 相反，您應該使用普通的 JS 對象、數組和基元。

好消息是您正在使用 Redux Toolkit 的createSlice API，它可以讓您編寫“變異”更新邏輯，從而成為安全且正確的createSlice 。 但是，您需要在我們的狀態中使用純 JS 對象才能正常工作。

我強烈建議通讀 Redux 核心文檔中的兩個教程：

• “Redux Essentials”教程，使用我們最新推薦的工具和實踐，教初學者“如何以正確的方式使用 Redux”。
• “Redux Fundamentals”教程，自下而上講授“Redux 的工作原理”。