How to use react-navigation-redux-helpers - 10 common examples

import reducers from 'rnstexampleapp/src/reducers';

const logger = store => next => (action) => {
  if (__DEV__) {
    if (action.type.indexOf('Navigation') === -1) {
      console.log(action);
    }
  }
  next(action);
};

/* create store */
const store = createStore(
  combineReducers({ ...reducers }),
  applyMiddleware(
    createReactNavigationReduxMiddleware(
      'root',
      state => state.nav,
    ),
    logger,
  ),
);

export default store;

export default (rootReducer: Reducer, rootSaga) => {
  /* ------------- Redux Configuration ------------- */

  const middleware: Middleware[] = []
  const enhancers: StoreEnhancer[] = []

  /* ------------- Navigation Middleware ------------ */
  const navigationMiddleware = createReactNavigationReduxMiddleware(
    (state: StoreState) => state.nav
  )
  middleware.push(navigationMiddleware)

  /* ------------- Analytics Middleware ------------- */
  middleware.push(ScreenTracking)

  /* ------------- Saga Middleware ------------- */

  const sagaMonitor = Config.useReactotron
    ? console.tron.createSagaMonitor()
    : null
  const sagaMiddleware = createSagaMiddleware({ sagaMonitor })
  middleware.push(sagaMiddleware)

  /* ------------- Assemble Middleware ------------- */

);

// default nav reducer
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('home'));
const navReducer = (state = initialState, action) => {
  const nextState = AppNavigator.router.getStateForAction(action, state);
  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

const appReducer = combineReducers({
  nav: navReducer,
  reducer,
});

const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);
const ReduxNavigator = reduxifyNavigator(AppNavigator, 'root');
const mapStateToProps = state => ({
  state: state.nav,
});
const ReduxRouter = connect(mapStateToProps)(Router);
const store = createStore(appReducer, applyMiddleware(middleware));

export default class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

import { createStore, applyMiddleware } from 'redux'
import AppReducer from './reducers/Index'
import {createReactNavigationReduxMiddleware} from 'react-navigation-redux-helpers'
import { composeWithDevTools } from 'redux-devtools-extension';
const middleware = createReactNavigationReduxMiddleware(
  state => state.nav,
);
const store = createStore(AppReducer, composeWithDevTools(
  applyMiddleware(middleware),
  // other store enhancers if any
));

export default store;

export default (Routes, initialScreen, sliceState): any => {
	const { router } = Routes
	const initialState = router.getStateForAction(
		router.getActionForPathAndParams(initialScreen)
	)

	// reducer
	const navReducer = (state = initialState, action) => {
		const nextState = router.getStateForAction(action, state)
		// Simply return the original `state` if `nextState` is null or undefined.
		return nextState || state
	}

	// middleware
	const navMiddleware = createReactNavigationReduxMiddleware('root', state =>
		sliceState(state)
	)

	const addListener = createReduxBoundAddListener('root')

	return {
		addListener,
		navMiddleware,
		navReducer,
	}
}

NavigationActions.navigate({ routeName: 'Signin' }),
          state,
        );
      }
      break;
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
      break;
  }

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener
export const navigationMiddleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);
const addListener = createReduxBoundAddListener("root");

class AppWithNavigationState extends Component {
  componentWillReceiveProps(nextProps) {
    if (!nextProps.user) {
      if (this.groupSubscription) {
        this.groupSubscription();
      }

      if (this.messagesSubscription) {
        this.messagesSubscription();
      }

/* @flow strict-local */
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import createActionBuffer from 'redux-action-buffer';
import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';

import config from '../config';
import { REHYDRATE } from '../actionConstants';
import { getNav } from '../selectors';

const reactNavigationMiddleware = createReactNavigationReduxMiddleware('root', getNav);

const middleware = [reactNavigationMiddleware, createActionBuffer(REHYDRATE), thunk];

if (config.enableReduxLogging) {
  middleware.push(
    createLogger({
      duration: true,
      // See docs/howto/debugging.md.
      // diff: true,
      // predicate: (getState, action) => action.type === 'MESSAGE_FETCH_COMPLETE',
    }),
  );
}

export default middleware;

const App = createReduxContainer(AppNavigator);

// Imports: Redux
import rootReducer from '../reducers/index';

const appReducer = combineReducers({
    ...rootReducer,
    nav : navReducer
  })


// Middleware: Redux Thunk (Async/Await)
const middleware = [thunk];

// Redux Helper
const reduxHelper = createReactNavigationReduxMiddleware(
  state => state.nav,
);
middleware.push(reduxHelper);

// Middleware: Redux Logger (For Development)
if (process.env.NODE_ENV !== 'production') {  
  // middleware.push(createLogger());
}

// Middleware: Redux Persist Config
const persistConfig = {
  // Root?
  key: 'root',
  // Storage Method (React Native)
  storage: AsyncStorage,
  // Whitelist (Save Specific Reducers)

import { createStore, applyMiddleware } from 'redux';
import { createReactNavigationReduxMiddleware, createReduxBoundAddListener } from 'react-navigation-redux-helpers';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import AppReducer from '../reducers';
//const logger = createLogger();
export const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);
export const addListener = createReduxBoundAddListener('root');
export default createStore(AppReducer, applyMiddleware(thunk, middleware /*createLogger*/));

* @Url: https://www.cubui.com
 */

import React from 'react';
import { compose, createStore, applyMiddleware } from 'redux';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';
import { createLogger } from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import { connect } from 'react-redux';
import AppRouteConfigs from './AppRouteConfigs';
import reducer from '../redux/reducers';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav,
);

const App = reduxifyNavigator(AppRouteConfigs, 'root');
const mapStateToProps = state => ({
  state: state.nav,
});

const AppWithNavigationState = connect(mapStateToProps)(App);

const loggerMiddleware = createLogger({ predicate: () => __DEV__ });

const configureStore = (initialState) => {
  const enhancer = compose(
    applyMiddleware(