解决React Redux刷新时localStorage数据丢失问题

// utils/localStorage.js
export const getExpensesFromLocalStorage = () => {
    try {
        const serializedExpenses = window.localStorage.getItem("ADDED_EXPENSES");
        if (serializedExpenses === null) {
            return []; // 如果localStorage中没有数据，返回空数组或默认值
        }
        return JSON.parse(serializedExpenses); // 反序列化数据
    } catch (error) {
        console.error("Error loading expenses from localStorage:", error);
        return []; // 发生错误时也返回空数组
    }
};

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

const AppInitializer = () => {
    const dispatch = useDispatch();
    const isNew = useSelector(state => state.expenses.isNew); // 假设isNew是Redux状态的一部分
    const nonFormattedItems = useSelector(state => state.expenses.items); // 假设items是Redux状态的一部分

    // 1. 在组件挂载时加载数据到Redux Store
    useEffect(() => {
        const loadedExpenses = getExpensesFromLocalStorage();
        if (loadedExpenses.length > 0) {
            dispatch(loadExpenses(loadedExpenses));
        }
    }, [dispatch]); // 确保dispatch不会导致无限循环，它通常是稳定的

    // ... 其他组件逻辑，例如处理新费用添加
    const newExpenseHandler = (expense) => {
        if (isNew) {
            dispatch(addExpense(expense));
        }
    };

    // ... 渲染子组件等
    return (
        <div>
            {/* 你的应用内容 */}
        </div>
    );
};

export default AppInitializer;

// utils/localStorage.js (可以与get函数放在一起)
export const saveExpensesToLocalStorage = (expenses) => {
    try {
        const serializedExpenses = JSON.stringify(expenses);
        window.localStorage.setItem("ADDED_EXPENSES", serializedExpenses);
    } catch (error) {
        console.error("Error saving expenses to localStorage:", error);
    }
};

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { saveExpensesToLocalStorage } from './utils/localStorage';

const ExpenseManager = () => {
    // 假设nonFormattedItems是Redux Store中需要持久化的费用列表
    const nonFormattedItems = useSelector(state => state.expenses.items);

    // 2. 监听nonFormattedItems的变化，并保存到localStorage
    useEffect(() => {
        // 仅在nonFormattedItems有值时才保存，避免保存空数组覆盖初始数据
        if (nonFormattedItems && nonFormattedItems.length > 0) {
            saveExpensesToLocalStorage(nonFormattedItems);
        } else if (nonFormattedItems && nonFormattedItems.length === 0) {
            // 如果清空了所有费用，也需要更新localStorage
            saveExpensesToLocalStorage([]);
        }
    }, [nonFormattedItems]); // 将nonFormattedItems作为依赖项

    // ... 其他组件逻辑
    return (
        <div>
            {/* 你的费用管理界面 */}
        </div>
    );
};

export default ExpenseManager;

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

// 辅助函数：从localStorage获取数据
const getExpensesFromLocalStorage = () => {
    try {
        const oldExpenses = JSON.parse(window.localStorage.getItem("ADDED_EXPENSES"));
        return oldExpenses || []; // 如果没有数据，返回空数组
    } catch (error) {
        console.error("Failed to parse expenses from localStorage:", error);
        return [];
    }
};

// 辅助函数：保存数据到localStorage
const saveExpensesToLocalStorage = (expenses) => {
    try {
        window.localStorage.setItem("ADDED_EXPENSES", JSON.stringify(expenses));
    } catch (error) {
        console.error("Failed to save expenses to localStorage:", error);
    }
};

const ExpenseComponent = () => {
    const dispatch = useDispatch();
    // 从Redux Store中获取当前费用列表
    const nonFormattedItems = useSelector(state => state.expenses.items);
    const isNew = useSelector(state => state.expenses.isNew); // 假设isNew是状态的一部分

    // 1. 组件挂载时，从localStorage加载数据并派发到Redux Store
    useEffect(() => {
        const loadedExpenses = getExpensesFromLocalStorage();
        if (loadedExpenses.length > 0) {
            // 确保加载的数据格式与Redux Store期望的一致
            // 如果日期是字符串，可能需要在此处转换为Date对象
            const formattedLoadedExpenses = loadedExpenses.map(expense => ({
                ...expense,
                date: new Date(expense.date) // 假设日期存储为ISO字符串
            }));
            dispatch(loadExpenses(formattedLoadedExpenses));
        }
    }, [dispatch]); // dispatch是稳定的，不会导致无限循环

    // 2. 监听Redux Store中的费用列表变化，并保存到localStorage
    useEffect(() => {
        // 在保存前，可能需要将Date对象转换回字符串，以便JSON.stringify正确处理
        const itemsToSave = nonFormattedItems.map(expense => ({
            ...expense,
            date: expense.date.toISOString() // 将Date对象转换为ISO字符串
        }));
        saveExpensesToLocalStorage(itemsToSave);
    }, [nonFormattedItems]); // nonFormattedItems变化时执行

    // 处理新费用添加的逻辑
    const newExpenseHandler = (expense) => {
        if (isNew) {
            dispatch(addExpense(expense));
        }
    };

    // 示例：在组件中显示数据
    return (
        <div>
            <h1>费用列表</h1>
            <button onClick={() => newExpenseHandler({ id: Date.now(), description: '新项目', amount: 100, date: new Date() })}>
                添加新费用
            </button>
            <ul>
                {nonFormattedItems.map(expense => (
                    <li key={expense.id}>
                        {expense.description}: ${expense.amount} on {expense.date.toLocaleDateString()}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default ExpenseComponent;