react-native - React Native Navigation 和 Redux Persist

Question

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

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

Answer 1

首先，基本设置应该与以下文档中描述的有或没有 react-native-navigation 类似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调用已被注释掉，我们将在下面进行。该persistStore方法在其第三个参数中接受回调。在状态恢复/重新水化后执行回调。这很好，因为这意味着我们可以延迟启动屏幕，直到状态恢复。

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

store = configureStore()

registerScreens(store, Provider)

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

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

store = configureStore()

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

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

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

Answer 2

如果您希望将其与 react-native-navigation v2 集成，请确保在 App.js 中persistStore()调用registerAppLaunchedListener()：

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

Answer 3

添加到他的解决方案中，您还可以使用 subscribe() 检查您的用户是否仍然登录。这样，如果他们完全关闭应用程序（对于那些具有登录系统的用户），他们就不需要再次登录，因为它仅在存储持久化后才调用，您可以在检查后启动您的应用程序。

    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'). 然后在应用程序启动之前更新商店。

localstorage在 web 上是一个同步函数，它阻塞了主线程。

AsynsStorage在 react-native 中不会阻塞主线程。