react-native - React Native Navigation 和 Redux Persist

Question

我正在尝试将 redux-persist 与 wix react-native-navigation 集成。但是，我找不到任何说明集成这两个库所需的样板代码的示例或文档。

我想知道如果有人解决了这个问题，是否有人愿意分享他们的解决方案？

Answer 1

首先，基本设置应该与使用或不使用 react-native-navigation 类似，如 in the documentation 所述。在 store.js :

import { persistStore, persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/es/storage' // default: 
localStorage if web, AsyncStorage if react-native
import reducers from './reducers' // where reducers is an object of 
reducers

const config = {
  key: 'root',
  storage,
}

const reducer = persistCombineReducers(config, reducers)

function configureStore () {
  // ...
  let store = createStore(reducer)
  return store

  // We'll skip persistStore for now
  // let persistor = persistStore(store)
  //return { persistor, store }
}

persistStore call 被注释掉了，我们将在下面这样做。 persistStore方法在其第三个参数中接受回调。在状态恢复/再水化后执行回调。这很好，因为这意味着 我们可以延迟启动屏幕直到状态重新水化 .

假设您在 App.js 中有以下引导代码:

store = configureStore()

registerScreens(store, Provider)

Navigation.startTabBasedApp({
  tabs: [{...},]
})

现在我们可以添加 persistStore 并将您的引导代码包装在其中，如下所示:

store = configureStore()

persistStore(store, null, () => {
  registerScreens(store, Provider)

  Navigation.startTabBasedApp({
    tabs: [{...},]
  })
})

笔记:
在 v4 中，您通过 配置而不是 空 : persistStore(store, config, callback)