CODEWITHSUNDEEP
javascriptreactjsreduxredux-toolkit
Quan Phung
Quan Phung

Reputation: 35

Reset state = initialState not working for me in redux

I want to reset state using below code. But I don't know why it gives me the error 'initialState' is not defined. Please help me to solve this problem. Thanks a lot.

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

Upvotes: 1

Views: 5653

Answers (5)

Mariana Reis Silveira
Mariana Reis Silveira

Reputation: 311

It worked for me by returning initialState instead of assigning it. Like this:

reset: (state) => {
  return initialState; // INSTEAD OF THIS state = initialState;
}

Upvotes: 4

mckenytech
mckenytech

Reputation: 11

if you are using redux toolkit...this is how you do it....

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),

Upvotes: 0

phry
phry

Reputation: 44086

state = something never works in RTK reducers. You can modify the object in the variable state, you cannot reassign the variable state to a new object.

Do return something instead of state = something. This is described in the Writing Reducers with immer documentation page.

Upvotes: 2

hamid mehmood
hamid mehmood

Reputation: 186

You have to manually declare the initial state to reset the state .

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;

Upvotes: 0

Aabhushan Gautam
Aabhushan Gautam

Reputation: 228

You have not initialized the initialState at all. You could pull the initialState out of the slice and it should work.

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;

Upvotes: 0

Related Questions