Question

我的应用是一个待办事项列表应用。

将 redux 状态持久化到本地存储是可行的。 ]

然而，我有一个问题，如果一个动作函数被调用，那么初始状态存储在本地存储中（即向 todoList 添加一个待办事项），但如果没有，则本地存储为空。

这会导致一个错误，因为我使用的是 uuid 库，并且在每次重新加载页面时都会生成一个新的 id。因此，当我在一个页面上（一个单独的待办事项项）时，我在第一次渲染时在 Redux 状态上使用 find 方法（使用 URL 的“id”与状态的“id”匹配） => find 方法完美运行并返回待办事项。但是，如果页面重新加载，则会生成一个新的“id”并且 find 方法返回 undefined，因为 id 不匹配。
当页面首次呈现时，有没有办法将初始状态存储到本地存储？任何帮助将不胜感激！

localStorage.js

export const loadState = () => {
    try {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null) {
            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (err) {
        return undefined;
    }
};

export const saveState = (state) => {
    try {
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);
    } catch (err) {
        console.log(err);
    }
};

store.js

import { createStore } from "redux";
import throttle from 'lodash/throttle';

import rootReducer from "./reducers";
import { loadState, saveState } from './../localStorage'

const persistedState = loadState();

const store = createStore(
    rootReducer,
    persistedState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({ trace: true, traceLimit: 25 })
);

store.subscribe(throttle(() => {
    saveState(
        store.getState()
    )
}, 1000))

export default store;

这是我的初始状态（在其中一个减速器 (todoListReducer) 中）

const INITIALSTATE = [
    {
        id: uuidv4(),
        text: 'Buy some bread',
        isComplete: false,
        isEdit: false,
        isFavorite: false,
        note: ''
    },
    {
        id: uuidv4(),
        text: 'Do a kata',
        isComplete: false,
        isEdit: false,
        isFavorite: false,
        note: 'Everyday this week'
    },
    {
        id: uuidv4(),
        text: 'Go for a run',
        isComplete: false,
        isEdit: false,
        isFavorite: false,
        note: 'Training for a marathon'
    }
]

这是从 SingleTodoPage 组件重新加载页面后返回 undefined 的方法：

 const { todoId } = props.match.params;

    const currentTodo = useSelector(state => {
        return (
            state.todoListReducer.find(todo => todo.id === todoId)
        )
    }
    )

将 redux 状态持久化到本地存储 => 有没有办法在页面首次呈现时将初始状态存储到本地存储？

0 个答案: