Custom Reducer for ReactNavigation

custom-reducer-for-react-navigation.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { addNavigationHelpers } from 'react-navigation';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { connect, Provider } from 'react-redux';
import { composeWithDevTools } from 'remote-redux-devtools';
import reducers from './redux/reducers';
import middlewares from './redux/middlewares';

// create redux store and async configuration
function createStoreWithMiddlewares() {
  // create navReducer
  const navReducer = (state, action) => {
    try {
      let newState = null;
      if (action.type === 'Navigation/REPLACE') {
        let replacingAtIndex = state.routes.length - 1;
        newState = state;
        if (typeof action.index === 'number') {
          replacingAtIndex = action.index;
        }
        newState.routes[replacingAtIndex] = {
          routeName: action.routeName,
          params: action.params,
        };
        return {
          ...state,
          routes: newState.routes,
          index: newState.routes.length - 1,
        };
      }

      if (action.type === 'Navigation/RESET') {
        const navAction = action.actions[0];
        return {
          ...state,
          routes: [{
            routeName: navAction.routeName,
            params: navAction.params,
            key: Utilities.uniqueId(),
          }],
          index: 0,
        };
      }

      newState = AppNavigator.router.getStateForAction(action, state);
      return newState || state;
    } catch (e) {
      console.log('nav reducer error', e);
      return state;
    }
  };

  const appReducers = combineReducers({
    nav: navReducer,
    ...reducers,
  });

  const rootReducer = (state, action) => {
    if (action.type === 'LOGOUT') {
      state = undefined; // eslint-disable-line no-param-reassign
    }
    return appReducers(state, action);
  };

  const appMiddlewares = composeWithDevTools(applyMiddleware(...middlewares));
  return createStore(rootReducer, appMiddlewares);
}
const store = createStoreWithMiddlewares();


// Using Replace
replace(routeName, params = {}, index) {
    let action = { // eslint-disable-line prefer-const
      routeName,
      params,
      type: 'Navigation/REPLACE',
    };
    if (typeof index === 'number') {
      action.index = index;
    }
    this.navigation.dispatch(action);
  }
 
 // Using reset
 resetToRoute(routeName, params = {}) {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName,
          params,
        }),
      ],
    });
    this.navigation.dispatch(resetAction);
  }