redux toolkit slice state doesn't clear

Question

I want to clear(reset) these states with _resetNewAdverbController reducer and I do it. I dispatch it after saving data and dispatch works correctly I check it. but data still exist. how can I clear it for saving another new data?

this is my slice that is used for saving some info.

import { citiesType, subCatType, uploadImagesType } from "./../../types/types";
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { newAdverbControllerState } from "../../initialStates/newAdverbController";

const initialState: newAdverbControllerState = {
  level: 1,
  catData: {
    subId: "",
    subTitle: "",
  },
  cityData: {
    cityId: "",
    cityName: "",
  },
  around: "",
  title: "",
  description: "",
  suggests: [],
  deleteSuggest: 0,
  phoneNumber: "",
  showPhoneNumber: false,
  chatEnabled: false,
  uploadImages: [],
};

export const newAdverbControllerSlice = createSlice({
  name: "newAdverbController",
  initialState,
  reducers: {
    setLevel: (state: { level: number }, action: PayloadAction<number>) => {
      state.level = action.payload;
    },
    setSubData: (
      state: { catData: subCatType },
      action: PayloadAction<subCatType>
    ) => {
      state.catData = action.payload;
    },
    setCityData: (
      state: { cityData: citiesType },
      action: PayloadAction<citiesType>
    ) => {
      state.cityData = action.payload;
    },
    _setAround: (state, action: PayloadAction<string>) => {
      state.around = action.payload;
    },
    _setTitle: (state, action: PayloadAction<string>) => {
      state.title = action.payload;
    },
    _setDescription: (
      state: { description: string },
      action: PayloadAction<string>
    ) => {
      state.description = action.payload;
    },
    _setSuggest: (
      state: { suggests: string[] },
      action: PayloadAction<string>
    ) => {
      state.suggests.push(action.payload);
    },
    _deleteSuggest: (
      state: { suggests: any[] },
      action: PayloadAction<number>
    ) => {
      state.suggests.splice(action.payload, 1);
    },
    _setPhoneNumber: (
      state: { phoneNumber: string },
      action: PayloadAction<string>
    ) => {
      state.phoneNumber = action.payload;
    },
    _setShowPhoneNumber: (
      state: { showPhoneNumber: boolean },
      action: PayloadAction<boolean>
    ) => {
      state.showPhoneNumber = action.payload;
    },
    _setChatEnabled: (
      state: { chatEnabled: boolean },
      action: PayloadAction<boolean>
    ) => {
      state.chatEnabled = action.payload;
    },
    _setUploadImage: (
      state: { uploadImages: uploadImagesType[] },
      action: PayloadAction<uploadImagesType>
    ) => {
      state.uploadImages.push(action.payload);
    },
    _deleteUploadImage: (
      state: { uploadImages: any[] },
      action: PayloadAction<number>
    ) => {
      state.uploadImages.splice(action.payload, 1);
    },
    _setUploadImageState: (
      state: { uploadImages: { completed: boolean }[] },
      action: PayloadAction<number>
    ) => {
      state.uploadImages[action.payload].completed = true;
    },
    _resetNewAdverbController: (state: newAdverbControllerState) => {
      state = initialState;
    },
  },
});

export default newAdverbControllerSlice.reducer;
export const {
  setLevel,
  setSubData,
  setCityData,
  _setAround,
  _setTitle,
  _setDescription,
  _setSuggest,
  _deleteSuggest,
  _setPhoneNumber,
  _setShowPhoneNumber,
  _setChatEnabled,
  _setUploadImage,
  _setUploadImageState,
  _deleteUploadImage,
  _resetNewAdverbController,
} = newAdverbControllerSlice.actions;

I also set undefined on _resetNewAdverbController like this state = undefined; but same issues;

Answer 1

It is return initialState, not state = initialState.

While you can modify the object that is in the variable state (and those modifications will be observed by RTK), you cannot reassign the variable state, as that cannot be observed from the outside.

Also see Resetting and Replacing State