如何在 redux-persist 中正确使用 getStoredState答案

【问题标题】：How to use getStoredState properly in redux-persist如何在 redux-persist 中正确使用 getStoredState
【发布时间】：2017-06-15 17:47:54
【问题描述】：

我不确定我是否正确使用了 redux-persist 库中的 getStoredState。我想使用已经持久化的 store 作为默认的 redux store。

config/store.js

async function getState() {
  const storedState = await getStoredState({ storage: AsyncStorage });

  const store = createStore(reducers, storedState, compose(
    applyMiddleware(logger),
    autoRehydrate()
  ));
  persistStore(store, {storage: AsyncStorage);
}

export default getState();

App.js

import store from 'config/store';
import { Provider } from 'react-redux';

export default () => (
  <Provider store={store}>
    //
  </Provider>
)

这会产生以下警告：

Warning: Failed child context type: The child context `store.subscribe` is marked as required in `Provider`, but its value is `undefined`.

Warning: Failed prop type: The prop `store.subscribe` is marked as required in `Provider`, but its value is `undefined`

任何想法是什么导致这些警告？我感觉我在 store.js 中做错了什么

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

问题在于，当您尝试实例化 Provider 时，您的 store 变量仍处于挂起状态：getStoreState 方法返回一个 Promise，因此您必须等到它完成才能使用 store。

这个例子展示了一个示例实现：

import {getStoredState, createPersistor} from 'redux-persist'

class App extends Component {

  constructor(props) {
    super(props)
    this.store = null
    this.persistor = null
  }

  componentWillMount(){
    const persistConfig = {storage: AsyncStorage}
    getStoredState(persistConfig, (err, restoredState) => {
      this.store = createStore(
        reducers,
        restoredState,
        compose(
          applyMiddleware(logger,)
        )
      )
      this.persistor = createPersistor(this.store, persistConfig)
      // Now that we have the store setted, reload the component
      this.forceUpdate()
    })
   }

  render() {
    if (!this.store) {
      // Loading screen
      return <Text>Loading</Text>
    } else {
      return (
          <Provider store={this.store}>
            <Router />
          </Provider>
      )
    }

  }
}

欢迎任何改进提示。

【讨论】：