只需 5 行代码即可为您的 React Reducer 添加离线缓存功能
在构建 Web 应用程序时，我经常使用这种方法来添加状态的本地存储缓存。
假设我们从以下情况开始：
const [state, dispatch] = React.useReducer(
reducer,
initialState
)
第一步，我们创建一个方法，该方法接收一个 reducer 并输出另一个 reducer，即一个高阶函数：
const withLocalStorageCache = reducer => { return (state, action) => {
const newState = reducer(state, action);
localStorage.setItem("my-state", JSON.stringify(newState));
return newState;
}};
我们在将结果传递给useReducerhook 之前，先用它包裹我们的 reducer。
const [state, dispatch] = React.useReducer(
withCache(reducer),
initialState
)
最后，我们将 initialState 替换为最新的缓存版本：
const [state, dispatch] = React.useReducer(
withCache(reducer),
localStorage.getItem("my-state")
)
就这样！
修改一行代码，新增 5 行代码，我们的整个状态就与 localStorage 同步了。
当然，我们可以将缓存范围限制在状态的特定部分，而不是整个状态对象。我们还可以根据操作或状态来限制缓存的更新。不过，这些就留给用户自行探索吧。
完整演示
文章来源：https://dev.to/rakannimer/add-offline-caching-to-your-react-reducer-with-5-lines-of-code-470n