React Redux 应用中本地存储数据持久化与刷新问题解析

// store.js
import { createStore, combineReducers } from 'redux';
import expensesReducer from './reducers/expenses'; // 假设这是你的费用 reducer

// 辅助函数：从本地存储加载状态
const loadState = () => {
    try {
        const serializedState = localStorage.getItem('reduxState'); // 使用一个统一的键名
        if (serializedState === null) {
            return undefined; // 没有找到状态，Redux 将使用 reducer 的默认状态
        }
        return JSON.parse(serializedState);
    } catch (error) {
        console.error("Error loading state from localStorage:", error);
        return undefined;
    }
};

// 辅助函数：保存状态到本地存储
const saveState = (state) => {
    try {
        const serializedState = JSON.stringify(state);
        localStorage.setItem('reduxState', serializedState); // 使用与加载时相同的键名
    } catch (error) {
        console.error("Error saving state to localStorage:", error);
    }
};

const rootReducer = combineReducers({
    expenses: expensesReducer,
    // ... 其他 reducers
});

const preloadedState = loadState(); // 在创建 store 前加载状态

const store = createStore(
    rootReducer,
    preloadedState, // 将加载的状态作为预加载状态传入
    // applyMiddleware(...) // 如果有中间件
);

// 订阅 store 变化，将状态保存到本地存储
// 这将在每次 Redux 状态更新时触发
store.subscribe(() => {
    saveState(store.getState());
});

export default store;

// Expense.js (或更高层级的组件)
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadExpenses, addExpense } from './actions/expenses'; // 假设有这些 actions

// 注意：这里不再需要 getLocalStorage 和 loadedExpenses 在模块顶层
// 因为我们已经在 store 初始化时处理了加载，或者将在 useEffect 中处理

const Expense = () => {
    const dispatch = useDispatch();
    const nonFormattedItems = useSelector(state => state.expenses.items); // 获取 Redux 状态中的费用列表

    // 假设在 store 初始化时已经加载了数据，这里可以根据需要决定是否还需要一个初始的 dispatch
    // 如果 store 已经从本地存储加载了，这里可能不需要再次 dispatch loadExpenses
    // 但是，如果 Redux store 内部没有处理加载，你可以在这里执行：
    // useEffect(() => {
    //     const oldExpenses = JSON.parse(window.localStorage.getItem("ADDED_EXPENSES")); // 确保键名一致
    //     if (oldExpenses) {
    //         dispatch(loadExpenses(oldExpenses));
    //     }
    // }, [dispatch]); // 仅在组件挂载时执行一次

    // 监听 nonFormattedItems 变化，并保存到本地存储
    useEffect(() => {
        if (nonFormattedItems) { // 确保 nonFormattedItems 不是 undefined 或 null
            window.localStorage.setItem(
                "ADDED_EXPENSES", // 确保与读取时的键名一致
                JSON.stringify(nonFormattedItems)
            );
        }
    }, [nonFormattedItems]); // 当 nonFormattedItems 变化时执行

    const newExpenseHandler = (expense) => {
        // ... 假设有逻辑判断是否为新费用
        dispatch(addExpense(expense));
    };

    // ... 其他组件逻辑
};

export default Expense;