使用 redux-toolkit 将 state 重置为初始值

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: state => 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

We do it like this guys.

Suppose you want to clear all the data at the point of logging out.

In your store.tsx file:

import { AnyAction, combineReducers, configureStore } from '@reduxjs/toolkit';
import authReducer from './slices/authSlice'
import messageReducer from './slices/messageSlice'



const appReducer = combineReducers({
  auth: authReducer,
  message: messageReducer,
});

const reducerProxy = (state: any, action: AnyAction) => {
  if(action.type === 'logout/LOGOUT') {
    return appReducer(undefined, action);
  }
  return appReducer(state, action);
}

export const store = configureStore({
  reducer: reducerProxy,
});

Then you create a thunk like this:

export const logout = navThunk(
    "auth/logout",
    async function (_payload, thunkAPI) {
        thunkAPI.dispatch({ type: 'logout/LOGOUT' });
        console.log('logged out')
    }
);

Answer 6

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 7

@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 });

Answer 8

When using multiple slices, all slices can be reverted to their initial state using extraReducers .

First, create an action that can be used by all slices:

export const revertAll = createAction('REVERT_ALL')

In every slice add an initialState , and an extraReducers reducer using the revertAll action:

const initialState = {};
export const someSlice = createSlice({
  name: 'something',
  initialState,
  extraReducers: (builder) => builder.addCase(revertAll, () => initialState),
  reducers: {}
});

The store can be created as usual:

export const store = configureStore({
  reducer: {
    someReducer: someSlice.reducer,
  }
})

And in your react code you can call the revertAll action with the useDispatch hook:

export function SomeComponent() {
  const dispatch = useDispatch();

  return <span onClick={() => dispatch(revertAll())}>Reset</span>
}