重置状态= initialState在redux中不起作用

3mpgtkmj  于 2022-11-12  发布在  其他
关注(0)|答案(4)|浏览(260)

我想使用下面的代码重置状态。但我不知道为什么它给我错误'initialState'是没有定义。请帮助我解决这个问题。谢谢。

import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState:
    // JSON.parse(localStorage.getItem('item')) ||
    {
      products: [],
      quantity: 0,
      total: 0,
    },
  reducers: {
    addProduct: (state, action) => {
      state.products.push(action.payload);
      state.quantity += 1;
      state.total += action.payload.price * action.payload.quantity;
      // localStorage.setItem('item', JSON.stringify(state));
    },
    deleteItem: (state, action) => {
      state.quantity -= 1;
      state.total -= action.payload.price * action.payload.quantity;
    },
    reset: (state) => {
      state = initialState;
    },
  },
});

export const { addProduct, reset, deleteItem } = cartSlice.actions;
export default cartSlice.reducer;

Error here

rqqzpn5f

rqqzpn5f1#

state = something从不在RTK减速器中工作。您可以修改变量state中的对象,但不能将变量state重新分配给新对象。
执行return something而不是state = something。这在使用immer的Writing Reducers文档页中进行了描述。

g6ll5ycj

g6ll5ycj2#

必须手动声明初始状态才能重置状态。

import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState:
    // JSON.parse(localStorage.getItem('item')) ||
    {
      products: [],
      quantity: 0,
      total: 0,
    },
  reducers: {
    addProduct: (state, action) => {
      state.products.push(action.payload);
      state.quantity += 1;
      state.total += action.payload.price * action.payload.quantity;
      // localStorage.setItem('item', JSON.stringify(state));
    },
    deleteItem: (state, action) => {
      state.quantity -= 1;
      state.total -= action.payload.price * action.payload.quantity;
    },
    reset: (state) => {
      state = {
      products: [],
      quantity: 0,
      total: 0,
    };
    },
  },
});

export const { addProduct, reset, deleteItem } = cartSlice.actions;
export default cartSlice.reducer;
gk7wooem

gk7wooem3#

您根本没有初始化initialState。您可以将initialState从切片中提取出来,它应该可以工作。

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
      products: [],
      quantity: 0,
      total: 0,
    };

const cartSlice = createSlice({
  name: 'cart',
  initialState:
    // JSON.parse(localStorage.getItem('item')) ||
    initialState
  reducers: {
    addProduct: (state, action) => {
      state.products.push(action.payload);
      state.quantity += 1;
      state.total += action.payload.price * action.payload.quantity;
      // localStorage.setItem('item', JSON.stringify(state));
    },
    deleteItem: (state, action) => {
      state.quantity -= 1;
      state.total -= action.payload.price * action.payload.quantity;
    },
    reset: (state) => {
      state = initialState;
    },
  },
});

export const { addProduct, reset, deleteItem } = cartSlice.actions;
export default cartSlice.reducer;
f1tvaqid

f1tvaqid4#

如果您正在使用Redux工具包...这就是您如何做的...。

import { createSlice } from "@reduxjs/toolkit";
import { getStringArray } from "../helperFunctions";
const initialState = {
  game: {
    MODAL_OPEN: false,
    END: false,
    PLAYING: false,
    LEVEL: 1,
    WON: false,
    LOST: false,
    wordLength: 5,
    RANDOM_WORD: "",
    colIndex: 0,
    rowIndex: 0,
    ATTEMPTS: 6,
    darkMode: false,
    INIT: false,
  },
  ROW_ARRAY: new Array(6).fill(new Array(5).fill({ value: "", color: "" })),
  ROW_ARRAY_NEW: new Array(6).fill(
    new Array(5).fill({ value: "", color: "#ddd" })
  ),
};

const gameSlice = createSlice({
  name: "game",
  initialState: initialState,
  reducers: {
    resetGame: (state) => (state = initialState),

相关问题