reactjs - 使用redux-persist保存和检索状态-React Native

我是本机反应的新手，而且我是第一次尝试保存应用程序的状态。

为了达到这个目的，建议使用redux-persist。
我希望在网络上找到更多有关它的示例和主题，并且我对redux-persist如何工作的想法并不那么清晰。

我遵循了github页面中的简短指南，但是一旦我关闭并重新打开我的应用程序，就看不到保存的状态值，但看到了默认的初始状态值。

这是我的app.js文件：

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';

class App extends Component {
  render() {
    const store = compose(applyMiddleware(ReduxThunk), autoRehydrate())(createStore)(reducers);
    persistStore(store, {storage: AsyncStorage}, () => {
        console.log('restored');
    })
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default App;

我还需要其他东西吗？

我还想知道如何在redux-persistor存储中console.log所有状态值。

提前致谢

最佳答案

您已将persistStore放入render方法中。
持久性调用是一个副作用，决不能在render中发生。

按照redux-persist文档对您的说明将其移至componentWillMount

export default class AppProvider extends Component {

  constructor() {
    super()
    this.state = { rehydrated: false }
  }

  componentWillMount(){
    persistStore(store, {}, () => {
      this.setState({ rehydrated: true })
    })
  }

  render() {
    if(!this.state.rehydrated){
      return <div>Loading...</div>
    }
    return (
      <Provider store={store}>
         {() => <App />}
      </Provider>
    );
  }
}

您需要推迟初始化，然后存储才会呈现。这是此代码段的作用