React Navigation with Redux Boilerplate Code

readme.md

versions

	version
react	16.4.1
react-native	0.56.0
react-navigation	2.9.2
redux	4.0.0
react-redux	5.0.7

Application.jsx

import React from 'react';
import { Provider, connect } from 'react-redux';
import { reduxifyNavigator } from 'react-navigation-redux-helpers';

import pageNation from './pageNation';
import { configureStore } from './Store';

const store = configureStore();
const mapStateToProps = (state) => ({
  state: state.nav,
});
const Root = reduxifyNavigator(pageNation, 'root');
const RootWithNavigationState = connect(mapStateToProps)(Root);


export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <RootWithNavigationState />
      </Provider>
    );
  }
}

pageNation.js

import { StackNavigator } from 'react-navigation';

import Initialize from './screen/initialize';

const PageNation = StackNavigator({
  initialize: Initialize,
});

export default PageNation;

reducer.js

import { combineReducers } from 'redux';
import { createNavigationReducer } from 'react-navigation-redux-helpers';

import pageNation from '../pageNation';
import tweets from './tweets';
import twitter from './twitter';

const navReducer = createNavigationReducer(pageNation);

export default combineReducers({
  nav: navReducer,
  tweets,
  twitter,
});

Store.js

import { createStore, applyMiddleware, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import {
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';

import reducers from './ducks/reducers';

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

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

const middlewares = [reactNavigationReduxMiddleware, loggerMiddleware, thunk];

export const configureStore = () => {
  const enhancer = compose(applyMiddleware(...middlewares));
  const store = createStore(reducers, enhancer);

  return store;
};