web-dev-qa-db-fra.com

Réagissez Native Navigation et Redux Persist

J'essaie d'intégrer redux-persist avec wix react-native-navigation. Cependant, je suis incapable de trouver des exemples ou de la documentation indiquant le code standard requis pour intégrer les deux bibliothèques. 

Je me demandais si quelqu'un voudrait partager sa solution s'il a résolu ce problème?

react-nativereduxreact-native-navigationredux-persist
8
Kamil Kamili

Tout d’abord, la configuration de base devrait être similaire à avec/sans navigation-native-navigation comme décrit dans la documentation in 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 }
}

L'appel persistStore est commenté comme nous le ferons ci-dessous. La méthode persistStore prend un rappel dans son troisième argument. Le rappel est exécuté une fois que l'état est restauré/réhydraté. C'est bien parce que cela signifie que nous pouvons retarder le démarrage de l'écran (des écrans) jusqu'à ce que l'état soit réhydraté.

Supposons que vous ayez le code d'amorçage suivant dans App.js:

store = configureStore()

registerScreens(store, Provider)

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

Nous pouvons maintenant ajouter persistStore et envelopper votre code d'amorçage comme suit:

store = configureStore()

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

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

Remarque: Dans la v4, vous passez config au lieu de null: persistStore(store, config, callback)

14
Leo Lei

Si vous souhaitez l'intégrer à react-native-navigation v2, dans App.js, veillez à appeler persistStore() dans la registerAppLaunchedListener():

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

En ajoutant à sa solution, vous pouvez également utiliser subscribe () pour vérifier si votre utilisateur est toujours connecté. Ainsi, il n'aura pas besoin de se reconnecter s'il ferme complètement l'application (pour les utilisateurs disposant d'un système de connexion) et ce, depuis. n’est appelé que lorsque le magasin est conservé, vous pouvez démarrer votre application une fois celle-ci cochée.

    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")
})
0
Stephen Tapia

créez simplement un magasin comme décrit dans la documentation redux-persist puis dans le fichier index.js, ajoutez une fonction d'emballage sur chaque écran, comme indiqué ici.

https://github.com/RajenderDandyal/toDoApp/blob/master/index.js

maintenant, si certains doseurs d'écran reçoivent un magasin mis à jour, utilisez store (). persistor.persist () avec une vérification de condition if comme effectuée ici https://github.com/RajenderDandyal/toDoApp/blob/master/src/ screens/ToDo/commentsScreen.js

0
rajender dandyal