Question

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

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

Answer 1

首先，基本设置应与store.js中in the documentation所述的反应原生导航相似或不相似：

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来电被注释掉，因为我们将在下面进行此操作。 persistStore方法在其第三个参数中进行回调。在恢复/重新水化状态后执行回调。这很好，因为这意味着我们可以延迟启动屏幕直到状态再水化。

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

store = configureStore()

registerScreens(store, Provider)

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

现在我们可以添加persistStore并将引导代码包装在其中：

store = configureStore()

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

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

注意：在第4版中，您传递 config 而不是 null ：persistStore(store, config, callback)

Answer 2

如果要与App.js中的react-native-navigation v2集成，请确保在persistStore()内调用registerAppLaunchedListener()：

import { persistStore } from 'redux-persist';
...
Navigation.events().registerAppLaunchedListener(() => {
  persistStore(store, null, () => {
    Navigation.registerComponentWithRedux(...);
    ...
    Navigation.setRoot({...})
     ...
  })
})

Answer 3

在他的解决方案中，您还可以使用subscription（）来检查您的用户是否仍在登录。这样，如果他们完全关闭了该应用程序，则无需再次登录（对于具有登录系统的用户）而且由于只有在存储持久后才调用它，因此您可以在选中此选项后启动您的应用。

    import {Platform, AsyncStorage, AppState} from "react-native"
    import {Navigation} from "react-native-navigation"
    import {registerScreens} from "./routes"
    import {Provider} from "react-redux"
    import configureStore from "./stores/reduxStore"
    import {Component} from "react"

      const storage = configureStore()

      registerScreens(Provider, storage.store)

let startapp = screen => {
  Navigation.startSingleScreenApp({
    screen: {
      screen, // unique ID registered with Navigation.registerScreen
      navigatorStyle: {
        navBarHidden: true,
        statusBarHidden: false,
        statusBarColor: "white",
        statusBarTextColorScheme: "dark"
      }, // override the navigator style for the screen, see "Styling the navigator" below (optional)
      navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
    },
    drawer: {
      left: {
        screen: "Drawer", // unique ID registered with Navigation.registerScreen
        passProps: {} // simple serializable object that will pass as props to all top screens (optional)
      }
    },
    tabsStyle: {
      // optional, add this if you want to style the tab bar beyond the defaults
      tabBarButtonColor: "#ffff00", // optional, change the color of the tab icons and text (also unselected). On Android, add this to appStyle
      tabBarSelectedButtonColor: "#ff9900", // optional, change the color of the selected tab icon and text (only selected). On Android, add this to appStyle
      tabBarBackgroundColor: "#551A8B", // optional, change the background color of the tab bar
      initialTabIndex: 1 // optional, the default selected bottom tab. Default: 0. On Android, add this to appStyle
    },
    appStyle: {
      orientation: "portrait"
    }
  })
}

storage.persistor.subscribe(() => {
  storage.store.getState().user.logged
    ? startapp("mainscreen")
    : startapp("loginscreen")
})

Answer 4

我们实际上不需要redux-persist。我们可以使用以下方法创建自己的redux-persist：

redux + store.subscribe(handlechange)

handleChange函数将在我们商店中发生任何更改时运行。

还使用aync-await(promise)不会阻塞主执行线程。

因此在内部创建商店中添加如下内容：

store.subscribe(async ()=>{
 try {
 await AsyncStorage.setItem("store", JSON.stringify(store.getState()));
 } catch (error) {
  // Error 
 } 
})

然后在App.js（第一个要加载的组件）中。使用AsyncStorage.getItem('store')。然后在应用启动之前更新商店。

Web上的

localstorage是一个同步功能，该功能阻止主线程。

react-native中的

AsynsStorage不会阻塞主线程。

React Native Navigation和Redux Persist

4 个答案: