reactjs - 首先 react 加载本地存储

Question

我有一个 react 应用程序，就像我有App.js一样，其中包括我的页眉和页脚..

在那里，我将我的状态存储到本地存储中。存储后我可以检索它..

但是我在加载它时遇到问题。在我的浏览器中，当我执行 localstorage['key'] 时，它为我提供了数据，但我无法加载。

我应该先在哪里加载它？

我有Root.js:

class Root extends Component {
  render() {
    const { store } = this.props
    return (
      <Provider store={store}>
          <ReduxRouter />
      </Provider>
    )
  }
}

Root.propTypes = {
  store: PropTypes.object.isRequired
}

export default Root

外层的

和 index.js :

const store = configureStore()


render(

    <Root store={store} />,
  document.getElementById('root')
)

我应该在哪里加载我的localStorage？

需要帮助。我需要知道在 React 中首先调用什么，以便我可以调用加载 localStorage 那里..如果这不是坏主意

Answer 1

您正在使用 redux，因此您应该读取数据作为操作的结果。

实现这项工作的最简单方法是:

1. 在 ReduxRouter 下应该有一个连接的组件。请参阅docs
2. 在该连接的组件中，添加 componentDidMount 以调用操作 getStuffFromLocalstorage。请参阅React lifecycle events
3. 在您的 reducer 中，从 localStorage 获取您想要的内容并填充状态

在您的 reducer 中执行此操作可能是一种反模式，但它至少会使 redux-flow 顺利运行。