Redux从本地文件加载初始数据，稍后从状态加载

Question

我使用React、Redux和Saga创建了一个Todo应用程序。然而，在应用程序加载时，我从本地文件中获取数据，但当我修改任何任务并更新它时，它会在状态中更新，但当我们再次刷新从本地文件加载时。

实现这一目标的最佳方式是什么？

以下是我在data.js 中的本地数据

let todos = [
{
id: 0.11,
name: 'Apple'
}]

下面是我的减速器：-

import todos from "./data";
const appReducer = (state = todos, action) => {
let newTodos;
switch (action.type) {
case "ADD_TODO_SAGA": {
newTodos = [...state];
newTodos.push(action.payload);
return newTodos;
}
})

请帮助

Answer 1

刷新或关闭选项卡时，redux中的状态将被销毁。使用localStorage和redux都可以实现这一点。每次更新redux时，也应该更新localStorage。对于每个装载的项目(componentDidMount(，您应该用存储在localStorage 中的数据填充redux

Answer 2

• 您的应用程序reducer从加载数据/数据文件
• 这是应用程序启动时的初始状态
• 如果您希望持久化数据，并且每次刷新时都应该反映相同的数据，那么请使用cookie存储来持久化它

1. 而不是从加载数据/直接数据文件a.创建一个getInitialState函数。b.尝试从cookie/缓存加载数据。c.如果找到所需的cookie，则返回该数据。d.如果未找到cookie，则从返回数据/数据文件
2. 除了获取，您还需要将状态存储在缓存中。因此，在每次redux更新时，将状态写入cookie/缓存

Answer 3

before:

case "ADD_TODO_SAGA": {
newTodos = [...state];
newTodos.push(action.payload);
return newTodos;
}

之后：

case "ADD_TODO_SAGA": {
state = [...state,
action.payload
];                
}