使用 Redux 在 localStorage 中仅保存特定的状态答案

【问题标题】：Saving only a particular piece of state in localStorage w/ Redux使用 Redux 在 localStorage 中仅保存特定的状态
【发布时间】：2018-04-21 09:55:37
【问题描述】：

如何使用 Redux 保存在 localStorage 中，只保存一个特定的状态？

比如我在list reducer中的状态定义如下：

state = {
    companies: [],
    currentDisplay: '',
    recordNotFound: false,
  }

这是我的 combineReducer 文件：

const rootReducer = combineReducers({
  list: listReducer,
  form: formReducer
})

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) {
    // to define
  }
}

在浏览器重新加载后，我只希望预加载 companies: [{obj1}, {obj2}, ...] 数组，并将其余状态重置为默认值 f.e. currentDisplay: '' 等于 ''。

现在负责这个操作的代码是这样的：

store.subscribe(() => {
  saveState({
    list: store.getState().list
  })
})

它显然存储了整个列表...... 我想我可以使用 setState() 在 React 中轻松地重置这些参数，但我想正确地做到这一点。

【问题讨论】：

标签： javascript object redux local-storage

【解决方案1】：

如果您不需要加载其他参数，您可以只保存localStorage 上的companies 参数。

store.subscribe(() => {
  saveState({
    companies: store.getState().list.companies
  })
})

【讨论】：

嘿，Tiago，不幸的是，这并不容易。我以前尝试过这个。在这种情况下，我在浏览器重新加载后的初始状态如下所示：list: [{...},{...}]，我希望它具有这样的结构：list: { companies: [{...},{...}], nextParam: ' ', nextParamm: ' '}
如果您不需要使用它们，我不明白存储其他参数的原因。但是你可以通过 return JSON.parse(serializedState).companies 来从 loadState 返回 companies 数组。
是的，这正是我想要的。多谢！ :) 其他参数是示例性的。它们充当标志和过滤器 f.e.