react-nativereact-reduxwix-react-native-navigationredux-persistreact-native-navigation-v2

Wix React-Native-Navigation v2 and redux-persist


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?


Solution

  • 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));
    ...
    }