Question

我最近开始在Redux中编码。

在使用AngularJS的Redux之前，使用$ localstorage很容易使用state映射模型。我只能找出使用Redux的最佳方法。

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

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

Answer 1

有几种方法。

请注意，要同步到localStorage，您需要调用非常昂贵的JSON.stringify，因此请不要经常这样做，也不要使用大型数据结构，因为它可能会影响应用的性能。< / p>

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

使用Redux进行本地存储

1 个答案: