React Redux应用中实现Local Storage数据持久化的完整指南

const getLocalStorage = () => {
    // 尝试从 "ADDED_EXPENSES" 键加载数据
    const oldExpenses = JSON.parse(window.localStorage.getItem("ADDED_EXPENSES"));
    if (oldExpenses) {
        return oldExpenses;
    } else {
        return [];
    }
};

const loadedExpenses = getLocalStorage(); // 在模块加载时执行一次

const Expense = () => {
    const dispatch = useDispatch();
    // ... 其他代码 ...

    // 初始化加载数据到Redux状态
    useEffect(() => {
        dispatch(loadExpenses(loadedExpenses));
    }, [dispatch]); // 依赖项为 dispatch

    const nonFormattedItems = useSelector(expenses); // 从Redux获取当前状态

    const updateLocalStorage = () => {
        // 尝试将数据保存到 "ADDED_ITEMS" 键
        window.localStorage.setItem(
            "ADDED_ITEMS",
            JSON.stringify(nonFormattedItems)
        );
    };

    // 在 nonFormattedItems 变化时保存数据
    useEffect(() => {
        updateLocalStorage();
    }, [nonFormattedItems]); // 依赖项为 nonFormattedItems

    // ... 其他处理逻辑 ...
};

const LOCAL_STORAGE_KEY = "APP_EXPENSES"; // 定义一个统一的键名

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadExpenses, addExpense } from './your-redux-slice'; // 假设你的Redux actions

const LOCAL_STORAGE_KEY = "APP_EXPENSES";

const getLocalStorageExpenses = () => {
    try {
        const storedExpenses = window.localStorage.getItem(LOCAL_STORAGE_KEY);
        return storedExpenses ? JSON.parse(storedExpenses) : [];
    } catch (error) {
        console.error("Error parsing local storage expenses:", error);
        return []; // 发生错误时返回空数组
    }
};

const ExpenseComponent = () => {
    const dispatch = useDispatch();
    const nonFormattedItems = useSelector(state => state.expenses.items); // 假设从Redux state中获取数据

    // 在组件挂载时加载数据到Redux
    useEffect(() => {
        const loadedExpenses = getLocalStorageExpenses();
        if (loadedExpenses.length > 0) {
            dispatch(loadExpenses(loadedExpenses));
        }
    }, [dispatch]); // 确保只在组件挂载时执行一次，dispatch 是稳定的

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

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadExpenses, addExpense } from './your-redux-slice'; // 假设你的Redux actions

const LOCAL_STORAGE_KEY = "APP_EXPENSES";

// ... getLocalStorageExpenses 函数同上 ...

const ExpenseComponent = () => {
    const dispatch = useDispatch();
    const nonFormattedItems = useSelector(state => state.expenses.items); // 假设从Redux state中获取数据

    // ... useEffect 用于加载数据同上 ...

    // 当 nonFormattedItems 变化时保存数据到Local Storage
    useEffect(() => {
        try {
            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(nonFormattedItems));
        } catch (error) {
            console.error("Error saving to local storage:", error);
        }
    }, [nonFormattedItems]); // 依赖项为 nonFormattedItems，当它变化时执行保存

    // ... 其他组件逻辑，例如添加新支出 ...
    const newExpenseHandler = (expense) => {
        dispatch(addExpense(expense));
    };

    return (
        <div>
            {/* ... 渲染支出列表或添加表单 ... */}
            <button onClick={() => newExpenseHandler({ id: Date.now(), description: "New Item", amount: 100, date: new Date() })}>Add Expense</button>
        </div>
    );
};

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
// 假设你的Redux slice/actions 定义在 './store/expensesSlice'
import { loadExpenses, addExpense, selectExpenses } from './store/expensesSlice'; 

// 定义统一的Local Storage键名
const LOCAL_STORAGE_KEY = "APP_EXPENSES";

// 从Local Storage加载数据的辅助函数
const getLocalStorageExpenses = () => {
    try {
        const storedExpenses = window.localStorage.getItem(LOCAL_STORAGE_KEY);
        // 如果没有存储数据，返回空数组；否则解析JSON
        return storedExpenses ? JSON.parse(storedExpenses) : [];
    } catch (error) {
        console.error("从Local Storage解析数据失败:", error);
        return []; // 发生错误时返回空数组
    }
};

const ExpenseComponent = () => {
    const dispatch = useDispatch();
    // 从Redux store中选择支出数据
    const expenses = useSelector(selectExpenses); // 假设 selectExpenses 是一个selector

    // 格式化支出数据（如果需要，例如日期对象）
    const formattedExpenses = expenses.map((expense) => {
        const dt = expense.date;
        // 确保日期是Date对象，如果它从Local Storage加载时是字符串
        const stDate = typeof dt === 'string' ? new Date(dt) : dt;
        return { ...expense, date: stDate };
    });

    // Effect 1: 组件挂载时，从Local Storage加载数据并初始化Redux状态
    useEffect(() => {
        const loadedExpenses = getLocalStorageExpenses();
        if (loadedExpenses.length > 0) {
            dispatch(loadExpenses(loadedExpenses));
        }
    }, [dispatch]); // 依赖项为 dispatch，确保只在组件挂载时执行一次

    // Effect 2: 当Redux中的 expenses 状态变化时，保存到Local Storage
    useEffect(() => {
        try {
            // 将当前Redux状态（未格式化的原始数据）保存到Local Storage
            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(expenses));
        } catch (error) {
            console.error("保存数据到Local Storage失败:", error);
        }
    }, [expenses]); // 依赖项为 expenses，当它变化时执行保存

    // 处理添加新支出的逻辑
    const handleAddExpense = (newExpenseData) => {
        // 确保新支出数据格式正确，例如日期为字符串以便存储
        const expenseToSave = { 
            ...newExpenseData, 
            date: newExpenseData.date.toISOString() // 将Date对象转换为ISO字符串以便存储
        };
        dispatch(addExpense(expenseToSave));
    };

    return (
        <div>
            <h1>支出管理</h1>
            <button onClick={() => handleAddExpense({ id: Date.now(), description: "新购物", amount: 50, date: new Date() })}>
                添加一笔新支出
            </button>
            <ul>
                {formattedExpenses.map((expense) => (
                    <li key={expense.id}>
                        {expense.description}: {expense.amount} ({expense.date.toLocaleDateString()})
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default ExpenseComponent;

// 假设的 Redux slice 定义 (./store/expensesSlice.js)
// import { createSlice } from '@reduxjs/toolkit';

// const expensesSlice = createSlice({
//     name: 'expenses',
//     initialState: {
//         items: [],
//         isNew: true, // 示例状态
//     },
//     reducers: {
//         loadExpenses: (state, action) => {
//             state.items = action.payload;
//         },
//         addExpense: (state, action) => {
//             state.items.push(action.payload);
//             state.isNew = false;
//         },
//         // ... 其他 reducer
//     },
// });

// export const { loadExpenses, addExpense } = expensesSlice.actions;
// export const selectExpenses = (state) => state.expenses.items;
// export const selectIsNew = (state) => state.expenses.isNew;
// export default expensesSlice.reducer;