react-navigation + redux

drawer-navigation-container.js

// this will upgrade your current navigator to redux-aware one

import * as ReactNavigation from 'react-navigation'
import { connect } from 'react-redux'
import { pick } from 'ramda'

// here is our redux-aware smart component
function DrawerNavigatorContainer (props) {
  const { dispatch, nav } = props
  const navigation = ReactNavigation.addNavigationHelpers({
    dispatch,
    state: nav
  })

  return <DrawerNavigator navigation={navigation} />
}

// i'm a ramda fan, but you can use pure js if you'd like:
// const mapStateToProps = state = ({ nav: state.nav })
const mapStateToProps = pick(['nav'])

export default connect(mapStateToProps)(DrawerNavigatorContainer)

navigation.actions.js

// completely optional, but here's a way to create some helper action creators you can call from your app.

import { NavigationActions } from 'react-navigation'

/**
 * Creates an navigation action for dispatching to Redux.
 *
 * @param {string} routeName The name of the route to go to.
 */
const navigateTo = routeName => () => NavigationActions.navigate({ routeName })

export const navigateToAccount = navigateTo('account')
export const navigateToChangePassword = navigateTo('changePassword')

navigation.reducer.js

import { NavigationActions } from 'react-navigation'
// i used a drawer, you can just use a stack
import { DrawerNavigator } from '../../ui/navigation/drawer-navigator/drawer-navigator'

const { navigate } = NavigationActions
const { getStateForAction } = DrawerNavigator.router

const initialState = getStateForAction(
  navigate({ routeName: 'dashboardStack' }) // my default "screen"
)

export function reducer (state = initialState, action) {
  return DrawerNavigator.router.getStateForAction(action, state) || state
}

root.reducer.js

import { combineReducers } from 'redux'
import { reducer as nav } from './navigation/navigation.reducer'

// add `nav` into your root reducer
export default () => combineReducers({
  nav // you only see 1 thing here, but your app will have many reducers.
})

some-container.js

// then to trigger an action
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Button } from 'react-native'

class SomeButton extends PureComponent {
  render () {
    return (
      <Button
        onPress={this.props.navigateToAccount}
        title='OMG LETS GO!!!!!!!'
      />
    )
  }
}


const mapDispatchToProps = dispatch => ({
  navigateToAccount: () => dispatch(navigateToAccount())
})

export default connect(null, mapDispatchToProps)(SomeButton)