Redux 数据仓库的数据持久化和 Next.js 中使用流程 | JustPure 起始页的构建历程

grtsinry43

3/7/2025（更新于 3/7/2025）

144 views

预计阅读时长 7 分钟

AI Summary

最近写了一个浏览器的起始页，是我无数忙碌任务中拼命抽时间赶出来的，很简陋但也是这段时间的一点心血，在无数忙碌生活中留下一个小小的自己的栖息罢了。

JustPure 起始页——摒弃繁杂，唯有纯粹

JustPure 起始页 - 摒弃繁杂，唯有纯粹

JustPure 起始页，一个简洁、高效的起始页，采用现代化设计，帮助你专注于工作和学习。

目前网站位于 cf 全球网络 ~~（国内减速网络）~~，之后我想办法优化回国带宽体验，也会写一个浏览器插件使之直接运行于本地，减少网络开销和卡顿。

界面和设计

额，这次就是我大面积用了 shadcn/ui，跟着组件库走还是可以的，有大佬反馈太花哨...我是计划提供切换一个模糊的关闭功能 ~~（其实之前写了但是实在写不完了，那个开关被我注释掉了）~~

Redux 的数据持久化

主要是想讲一下这个，首先是在 Next.js 中可以直接参考官方文档：

Redux Toolkit Setup with Next.js

Redux Toolkit Setup with Next.js | Redux

我的计划是维护一个数据仓库，并且会实时同步到 localstorage 做数据持久化

思路是这样的：

首先 Redux 提供了一个 preloadedState 部分，这允许我们先预先加载一部分数据，我们可以利用这个将 localstorage 的内容加载进来，而对于保存，Redux，提供了一个事件订阅 subscribe，我们可以在这里异步进行存储和更新。

思路很明确了，那我们就可以直接开始写了：

加载状态

typescript
1const loadState = () => {
2    if (typeof window === 'undefined') {
3        return undefined;
4    }
5    try {
6        const serializedState = localStorage.getItem('appState');
7        if (serializedState === null) {
8            return undefined;
9        }
10        return JSON.parse(serializedState);

保存/覆盖状态

typescript
1const saveState = (state: RootState) => {
2    if (typeof window === 'undefined') {
3        return;
4    }
5    try {
6        const serializedState = JSON.stringify(state);
7        localStorage.setItem('appState', serializedState);
8    } catch (err) {
9        console.error(err);
10    }

于是我们可以在构建 store 中使用这两个函数

typescript
1export const makeStore = () => {
2    const store = configureStore({
3        reducer: {
4            //...（你的 reducers）
5        },
6        preloadedState: loadState(),
7    });
8
9    if (typeof window !== 'undefined') {
10        store.subscribe(() => {

如果你使用的是 js，那么恭喜你已经没有问题了，但是如果是 ts，...这种写法类型推断就无法正常运行了

原因在哪里呢？

其实很简单我们看函数签名就一目了然了，由于 JSON.parse 返回了 any，整个函数返回了 undefined|any，导致类型与 store 不匹配，那么我们就要着手解决这个问题。

我们先集中定义类型：

typescript
1// 1. 先集中定义所有 reducers
2const reducers = {
3    //...（你的 reducers）
4};

然后我们要手动推导 RootStore 的类型：

typescript
1// 2. 基于 reducers 推导 RootState 类型
2export type RootState = {
3    [K in keyof typeof reducers]: ReturnType<typeof reducers[K]>
4};

拿到了类型就可以在加载数据的时候进行类型断言啦：

typescript
1// 3. 这里解析后断言为 RootState 类型（需确保存储结构与当前 reducers 匹配）
2        return JSON.parse(serializedState) as RootState;

此时我们组合之前的函数：

typescript
1export const makeStore = () => {
2    const store = configureStore({
3        reducer: reducers, // 使用集中定义的 reducers
4        preloadedState: loadState(), // 现在类型明确为 RootState | undefined
5    });
6
7    if (typeof window !== 'undefined') {
8        store.subscribe(() => {
9            saveState(store.getState());
10        });