### 集成
Redux Toolkit 与
redux-persist 在 TypeScript 中
为了实现
Redux Toolkit 和 `
redux-persist` 的集成，在项目中需安装必要的依赖包。通过命令行工具可以轻松完成这些操作：
```bash
npm install
@reduxjs/
toolkit react-redux redux-persist persist
-rehydrate
```
创建 store 文件时，应配置持久化存储逻辑并定义根 reducer。下面是一个完整的例子来展示如何设置这一过程[^1]。
#### 创建 Store 并应用 Middleware
在文件顶部引入所需的模块之后，使用 `configureStore()` 方法来自动生成带有中间件支持的标准
Redux 商店实例。这里特别要注意的是加入了 `createWrapper` 来处理服务器端渲染的情况以及 `persistReducer` 函数用于指定哪些部分的数据需要被保存到本地缓存中。
```typescript
// src/store
.ts
import { configureStore } from '
@reduxjs/
toolkit';
import {
persistStore,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from '
redux-persist';
const rootReducer = (state: any, action: AnyAction) => {
switch (action
.type) {
case CLEAR_STORAGE:
state = undefined;
break;
default:
break;
}
return appReducer(state, action);
};
export const makeStore = () =>
configureStore({
reducer: persistedReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
});
let store = makeStore();
export const wrappper = createWrapper(makeStore);
export type RootState = ReturnType<typeof store
.getState>;
export type AppDispatch = typeof store
.dispatch;
export default store;
```
#### 定义 Root Reducer 及 Persist Config
接着要做的就是编写 root reducer 负责管理整个应用程序的状态树结构；同时也要设定好 `persistConfig`, 这样才能告诉 `
redux-persist` 哪些数据应该被永久保留下来。对于敏感信息不建议进行持久化处理以免造成安全隐患。
```typescript
// src/reducers/rootReducer
.ts
import storage from '
redux-persist/lib/storage'; // defaults to localStorage for web
import { combineReducers } from '
@reduxjs/
toolkit';
import { persistReducer } from '
redux-persist';
import userSlice from '
./userSlice';
const persistConfig = {
key: 'root',
version: 1,
storage,
blacklist: ['sensitiveData'], // 不会持久化的reducer名称数组
};
const reducers = combineReducers({
user: userSlice
.reducer,
});
const persistedReducer = persistReducer(persistConfig, reducers);
export default persistedReducer;
```
最后一步是在组件内部连接
React 应用程序
和新建立好的
Redux 存储库之间关系。这通常涉及到提供者模式的应用，即包裹顶层组件以使所有子级都能访问全局状态。
```
jsx
// src/index
.jsx 或 index
.tsx
import
React from '
react';
import
ReactDOM from '
react-dom/client';
import { Provider } from '
react-redux';
import { PersistGate } from '
redux-persist/integration/
react';
import { store, persistor } from '
./store';
import App from '
./App';
const container = document
.getElementById('app');
if (!container) throw new Error('Failed to find the root element');
const root =
ReactDOM
.createRoot(container);
root
.render(
<Provider store={store}>
<PersistGate loading={<div>Loading
...</div>} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
);
```
这样就完成了
Redux Toolkit 结合 `
redux-persist` 实现简单而强大的前端状态管理
和持久化方案的搭建工作。
扫一扫
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
