Wix React-Native-Navigation v2 and redux-persist

Question

I am using react-native-navigation and redux for state management. I register each Component as a WrappedComponent, hooking it up the redux store. This works very well and is very similar as in the atoami example code from the official react-native-navigation documentation: https://wix.github.io/react-native-navigation/#/docs/showcases

import { Provider } from "react-redux";
import store from "./config/store";
...
function WrappedComponent(Component) {
  return function inject(props) {
    const EnhancedComponent = () => (
      <Provider store={store}>
        <Component {...props} />
      </Provider>
    );

    return <EnhancedComponent />;
  };
}

export function registerScreens() {
  Navigation.registerComponent("Initializing", () =>
    WrappedComponent(InitializingScreen)
  );
  Navigation.registerComponent("SignIn", () => WrappedComponent(SignInScreen));
...
}

With the store object being:

import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import reducers from "../reducers";

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore(
  reducers,
  composeEnhancer(applyMiddleware(thunk))
);

However, I could not find a way to set-up redux persist for those wrapped components. I would not want to do it within the WrappedComponent function because it would then get called for each individual component. I could also not find clear documentation on this.

I guess I could also use AsyncStorage but would prefer to use it together with Redux-persist. Does someone know how to do this?

score 4 · Accepted Answer · answered Jun 15 '19 at 16:16

This is how I handle redux, redux persists and wix v2 react-native-navigation

In your store.js

import {createStore,applyMiddleware} from "redux";
import rootReducer from './reducers/RootReducer';
import thunk from 'redux-thunk';
import {persistStore, persistReducer} from 'redux-persist';
import {compact} from "lodash";
import storage from 'redux-persist/lib/storage';


const persistConfig = {
    key: 'app',
    storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);

const middleware =compact([
    thunk.withExtraArgument()
]);


export const store = createStore( persistedReducer,applyMiddleware(...middleware));
export const persistor = persistStore(store);

Then in your navigation.js or where you basically registering the screens

import React from "react";
import {Navigation} from "react-native-navigation";
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react'
import {store, persistor} from "./config/store"; //Check this line

function WrappedComponent(Component) {
  return function inject(props) {
    const EnhancedComponent = () => (
     <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
             <Component {...props}/>
         </PersistGate>
      </Provider>
    );
    return <EnhancedComponent />;
  };
}

// Then your normal registration
export function registerScreens() {
  Navigation.registerComponent("Initializing", () =>
    WrappedComponent(InitializingScreen)
  );
  Navigation.registerComponent("SignIn", () => WrappedComponent(SignInScreen));
...
}

Thanks for the answer. Just to clarify, the PersistGate only delays the rendering of the component until the state has been loaded, right? But it does not try to get the persisted state for each component created through EnhancedComponent? So the persisted state is only loaded once when loading up the app? — Cactus, Jun 15 '19 at 18:47
As per their documentation, yes `PersistGate` delays the rendering of the app UI until the persisted state has been retrieved and saved to redux. And yes it load once when you are initializing your app. For more info check here https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md — user7747472, Jun 15 '19 at 21:01
Great, I just had a chance to try this out and works very well. Thank you. — Cactus, Jun 16 '19 at 22:50

score 0 · Answer 2 · answered Jun 14 '19 at 14:40

0

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

you can add Redux-persist with react-native-navigation like this.

answered Jun 14 '19 at 14:40

Kiruba

11
2
4

Wix React-Native-Navigation v2 and redux-persist

2 Answers2