Reset state to initial with redux-toolkit

Question

I need to reset current state to initial state. But all my attempts were unsuccessful. How can I do it using redux-toolkit?

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState: {
    returned: [],
  },
  reducers: {
    reset(state) {
      //here I need to reset state of current slice
    },
  },
});

Answer 1

Something like this:

const intialState = {
  returned: []
}

const showOnReviewSlice = createSlice({
    name: 'showOnReview',
    initialState,
    reducers: {
        reset: () => initialState
    }
});

Answer 2

This worked for me (mid-late 2020). Formatted with your code context as an example.

const initialState = {
  returned: [],
};

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState,
  reducers: {
    reset: () => initialState,
  },
});

Answer 3

Replacing state with initialState directly did not work for me (mid 2020). What I finally got working was to copy each property over with Object.assign(). This worked:

const showOnReviewSlice = createSlice({
    name: 'showOnReview',
    initialState: {
        returned: []
    },
    reducers: {
        reset(state) {
            Object.assign(state, initialState)
        }
    }
});

Answer 4

In my case, as the previous answer, mid 2021, just setting the initial state DO NOT WORK, even if you use the toolkit adapter like :

reducers: {
        // Other reducers
         state = tasksAdapter.getInitialState({
                status: 'idle',
                error: null,
                current: null
            })
        }
    },

instead, you should use Object.assign(), guess that it's related with the internal immer library behavior

Answer 5

You can use spread opearator for initialState

const initialState: {
  returned: unknown[] //set your type here
} = {
  returned: []
}

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState,
  reducers: {
    reset() {
      return {
        ...initialState
      }
    }
  }
});

Answer 6

@i9or i have a similar question, but for combined slices, I want to able to reset the state to default when i call the log

code for combining reducers alongside reduxtoolkit-query

// combining the reducers
const reducers = combineReducers({
  // regular-state
  themeMode: themeSlice.reducer,
  user: userSlice.reducer,
  onboarding: onboardingSlice.reducer,
  setupWizard: setupWizardSlice.reducer,
  // end regular-state
  //start rtk-query
  [supplyMgtApi.reducerPath]: supplyMgtApi.reducer,
  [vendorApi.reducerPath]: vendorApi.reducer,
  [warehouseApi.reducerPath]: warehouseApi.reducer,
  [inventoryApi.reducerPath]: inventoryApi.reducer,
  [commonsApi.reducerPath]: commonsApi.reducer,
  [productApi.reducerPath]: productApi.reducer,
  [employeeApi.reducerPath]: employeeApi.reducer,
  [payGroupApi.reducerPath]: payGroupApi.reducer,
  [rolesApi.reducerPath]: rolesApi.reducer,
  [taxationApi.reducerPath]: taxationApi.reducer,
  //end rtk-query
});