使用 Redux 进行本地存储答案

【问题标题】：Local storage with Redux使用 Redux 进行本地存储
【发布时间】：2018-02-22 14:08:39
【问题描述】：

我最近开始使用 Redux 进行编码。

在使用 AngularJS 的 Redux 之前，使用 $localstorage 很容易将模型与状态进行映射。我只是想出用 Redux 做到这一点的最佳方法。

我应该在我的代码中调度和操作并要求减速器读取本地存储吗？

或者我应该允许使用全局对象管理本地存储吗？

【问题讨论】：

标签： redux react-redux local-storage

【解决方案1】：

有几种方法。

请注意，要同步到localStorage，您需要调用JSON.stringify，这非常昂贵，因此请不要经常这样做，并且对于大型数据结构也可能会损害应用程序的性能。

1) 同步整个 Redux 存储到本地存储。您可以使用现有的解决方案，例如。 https://github.com/elgerlambert/redux-localstorage

我不建议同步整个存储，因为您可能还会同步刷新后不应保留的状态，并且您可能会使应用程序变慢；为了获得更好的性能，您可以使用上述库中的 paths 参数或使用其他选项之一。
要了解如何手动构建此类功能，请观看 Dan https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage 的精彩视频说明

2) 手动构建简单的缓存中间件，如下所示，它可能会捕获您希望与本地存储同步的特定操作

const cacheMiddleware = store => next => action => {
  if(action.type !== 'GET_SOMETHING') {
    return next(action);
  }
  const data = getFromLocalstorage();
  if(!data) {
    // Fetch and put to localstorate for later use
    const data = fetchFromServer();
    return next({ type: 'SERVER_RESULT', data });
  }
  return next({ type: 'CACHED_RESULT', data });
};

3) 如果您使用Redux Thunk，您可以在那里执行缓存，因为您可以在操作中产生副作用。

你可以在这里找到更多关于 Redux 中间件的信息https://redux.js.org/advanced/middleware

【讨论】：