如何使用 redux - toolkit 配置 redux 持久化？

在使用 Redux 工具包（Redux Toolkit）配置 Redux 持久化时，我们通常会结合使用 Redux Persist 这个库。Redux Persist 能够帮助我们将 Redux 的状态存储在浏览器的存储中（如 localStorage 或者 sessionStorage），从而在页面刷新后仍然保持应用状态。下面我将详细说明如何配置 Redux 持久化。

步骤 1: 安装必要的包

首先，我们需要安装 Redux Toolkit 和 Redux Persist：

bash
npm install @reduxjs/toolkit redux-persist

步骤 2: 配置持久化的Reducer

我们需要创建一个持久化的 reducer，这通过使用 redux-persist 的 persistReducer 函数来实现。我们还需要指定存储的方式和哪些 reducer 需要持久化。

javascript
import { configureStore } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage'; // 默认使用 localStorage
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';

import userReducer from './features/userSlice';
import settingsReducer from './features/settingsSlice';

const rootReducer = combineReducers({
   user: userReducer,
   settings: settingsReducer
});

const persistConfig = {
   key: 'root',
   storage,
   whitelist: ['user'] // 仅持久化 user reducer
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

步骤 3: 创建Redux Store并引入持久化的Reducer

接下来，我们需要使用 Redux Toolkit 的 configureStore 方法来创建 Redux store，并将持久化的 reducer 传入。

javascript
import { configureStore } from '@reduxjs/toolkit';
import { persistStore } from 'redux-persist';

const store = configureStore({
   reducer: persistedReducer
});

const persistor = persistStore(store);

步骤 4: 在React应用中使用PersistGate

为了在 React 应用中使用 Redux 持久化，我们需要使用 redux-persist 的 PersistGate 组件包裹应用的入口。这确保了应用加载时会从存储中恢复状态。

javascript
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

总结

通过以上步骤，我们成功配置了 Redux 持久化，以保持特定的状态即使在页面刷新后也能保留。这在实际开发中非常有用，比如在用户认证状态、用户偏好设置等需要持久化的场景。