rm.md

$npm i --save react-redux

At project root folder, create folder store Create file configureStore.js in store folder

import { createStore } from 'redux';
 
import reducers from '../reducers'
 
export default function configureStore(initialState) {
  const store = createStore(
    reducers,
    initialState
  );
  return store
}

Create file store.js in store folder

import configureStore from './configureStore';
 
export default  store = configureStore();

Create file AppWithNavigation.js in navigation folder

import React, { Component } from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
 
import Routes from '../utils/Routes';
 
import RootNavigator from './RootNavigator';
 
const App = ({ dispatch, nav }) => {
 
  return (
    <RootNavigator
      onNavigationStateChange={Routes.onNavigationStateChange}
      // navigation={addNavigationHelpers({
      //   dispatch,
      //   state: nav
      // })
      // }
    />
  );
};
 
const mapStateToProps = state => ({
  nav: state.nav
});
 
const AppWithNavigation = connect(mapStateToProps)(App);
 
export default AppWithNavigation;

At project root, create folder root, and create Root.android.js and Root.ios.js

import React, { Component } from 'react';
import { View } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { Provider } from 'react-redux';
 
import Languages from '../components/I18n/Languages';
import FilePicker from '../components/filePicker/FilePicker';
import DialogComponent from '../components/dialog/Dialog';
import LoadingSpinner from '../components/loadingSpinner/LoadingSpinner';
import NetworkStatus from '../components/networkStatus/NetworkStatus';
import SignalRComponent from '../components/signalR/SignalR';
import RealmProvider from '../realm/Provider';
import AppWithNavigation from '../navigation/AppWithNavigation';
 
import store from '../store/store'
 
export default class Root extends Component {
 
  state = {
    isReady: false
  };
 
  async componentDidMount() {
    setTimeout(() => {
      this.setState({ isReady: true }, () => {
        SplashScreen.hide();
      });
    }, 1000);
  }
 
  render() {
    const { isReady } = this.state;
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <NetworkStatus/>
          <LoadingSpinner/>
          <Languages/>
          <FilePicker/>
          <DialogComponent/>
          <SignalRComponent/>
          {isReady && <RealmProvider style={styles.container}>
            <AppWithNavigation />
          </RealmProvider>}
        </View>
      </Provider>
    );
  }
}
 
const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
};

At project root, create folder reducers Create file nav.js in reducers folder

import { NavigationActions } from 'react-navigation';
import RootNavigator from '../navigation/RootNavigator';
 
const initialSate = RootNavigator.router.getStateForAction(NavigationActions.init());
 
export const nav = (state = initialSate, action) => {
  const nextState = RootNavigator.router.getStateForAction(action, state);
  return nextState || state;
};

Create index.js in reducers folder

import { combineReducers } from 'redux';
 
import {nav} from './nav';
 
export default combineReducers({
  nav,
})

In index.ios.js and index.android.js change content to below

import { AppRegistry } from 'react-native';

import Root from './root/Root';

AppRegistry.registerComponent('rnvpa', () => Root);

Example

Let create actions folder in project root, then create claim.js

import TYPES from '../constants/type';

export function setList(data) {
  return {
    type: TYPES.SET_CLAIM_LIST,
    payload: data,
  }
}

Create claim.js in reducers foder

import * as _ from 'lodash';
import TYPES from '../constants/type';

export const claim = (state = [], action) => {

  switch (action.type) {
    case TYPES.SET_CLAIM_LIST:
      return action.payload;
      
      default :
      return state;
  }
};

change index.js in reducers folder

import { combineReducers } from 'redux';
import {nav} from './nav';
import { claim } from './claim';
export default combineReducers({
  nav,
  claim,
})

in our component

import {connect} from 'react-redux';
import {setList} from '../../actions/claim'

class MyComponent extends Component{
 
 //in our component we have props `claim` `this.props.claim` and `function`  `this.props.setList`
 //if we call this.props.setList(data) then this.props.claim will change

}
const mapStateToProps = state =>{
 const {claim} = state;
 return {
  claim
 }
}

export default connect(mapStateToProps, {setList})(MyComponent);