使用 redux-toolkit 将状态重置为初始状态

Question

我需要将当前状态重置为初始状态。但我所有的尝试都没有成功。我如何使用 redux-toolkit 做到这一点？

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

Answer 1

像这样的东西：

const intialState = {
  returned: []
}

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

Answer 2

当使用多个切片时，可以使用extraReducers将所有切片恢复到其初始状态。

首先，创建一个可供所有切片使用的操作：

export const revertAll = createAction('REVERT_ALL')

在每个切片中添加一个initialState, 和一个extraReducers减速器，使用以下revertAll操作：

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

可以像往常一样创建商店：

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

在您的反应代码中，您可以revertAll使用钩子调用该操作useDispatch：

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

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

Answer 3

state直接替换为对我来说不起作用initialState（2020 年中）。我最终要做的就是用 复制每个属性。这有效：Object.assign()

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

Answer 4

我们就像这些人那样做。

假设您想在注销时清除所有数据。

在您的 store.tsx 文件中：

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

然后你创建一个像这样的thunk：

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

发送注销 thunk 后，您还可以刷新浏览器，以便它自动将用户重定向到登录页面。

function MyReactComponent() {
   const dispatch = useDispatch()

   function myLogoutOnClickHandler() {
      dispatch(logout())
      window.location = window.location;
   }
   ...

}

Answer 5

这对我有用（2020 年中后期）。以您的代码上下文为例进行格式化。

const initialState = {
  returned: [],
};

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

Answer 6

就我而言，正如之前的答案（2021 年中期），仅设置初始状态是行不通的，即使您使用如下工具包适配器：

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

相反，你应该使用Object.assign()，猜测它与内部沉浸库行为有关