react-native navigationV3 integrating redux - react-native

Question

My objective is to implement redux into my react-native proj. But it's not an error, it's unsuccessful. How can I organize my code such that it'll work?
App.js
import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import ReduxNavigation from './src/navigation/ReduxNavigation';
import AppReducer from './src/reducers/index';
import { middleware } from './src/utils/redux';
import { createStore, applyMiddleware } from 'redux';
import { logger } from 'redux-logger';
import thunk from 'redux-thunk';
import AppNavigation from './src/navigation/AppNavigation';
//import promise from 'redux-promise-middleware';
import { NavigationActions } from 'react-navigation';
// create our store
const store = createStore(AppReducer, applyMiddleware(thunk, logger));
class App extends React.Component {
render() {
return (
<Provider store={store}>
<AppNavigation />
</Provider>
);
}
}
export default App;
../utils/redux
import {
createReactNavigationReduxMiddleware,
reduxifyNavigator,
createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { createStackNavigator } from 'react-navigation';
const middleware = createReactNavigationReduxMiddleware(
'root',
state => state.nav
);
const App = reduxifyNavigator('root');
export { middleware, App };
../navigation/navReducer
import { NavigationActions } from 'react-navigation';
import AppNavigation from '../navigation/AppNavigation';
const firstAction = AppNavigation.router.getActionForPathAndParams(
'initialStack'
);
const tempNavState = AppNavigation.router.getStateForAction(firstAction);
const initialNavState = AppNavigation.router.getStateForAction(tempNavState);
const nav = (state = initialNavState, action) => {
let nextState;
switch (action.type) {
default: {
nextState = AppNavigation.router.getStateForAction(action, state);
break;
}
}
return nextState || state;
};
export default nav;
../reducers/index
import { combineReducers } from 'redux';
import transactionsReducer from './transactionsReducer';
import setVisibilityFilter from './setVisibilityFilter';
import userReducer from './userReducer';
import AppNavigation from '../navigation/AppNavigation';
import { createNavigationReducer } from 'react-navigation-redux-helpers';
import nav from './navReducer';
const navReducer = createNavigationReducer(AppNavigation);
const AppReducer = combineReducers({
nav: navReducer,
transactionsReducer,
setVisibilityFilter,
userReducer,
});
export default AppReducer;
../navigation/ReduxNavigation
import React from 'react';
import { addNavigationHelpers,StackNavigator } from 'react-navigation';
import { connect } from 'react-redux';
import {AppNavigation} from './AppNavigation';
class ReduxNavigation extends React.Component {
render() {
const { dispatch, nav } = this.props;
return (
<AppNavigation
navigation={addNavigationHelpers({
dispatch,
state: nav,
})}
/>
);
}
}
const mapStateToProps = state => ({
nav: state.nav,
});
export default connect(mapStateToProps)(ReduxNavigation);
../navigation/AppNavigation
//please consider all my screens to be dumb for transparency..
import React from 'react';
import { StackNavigator, createDrawerNavigator } from 'react-navigation';
import { Button, Icon } from 'native-base';
import InitialScreen from '../containers/InitialScreen';
//import ForgottenPasswordScreen from '../containers/ForgottenPassword';
import Transactions from '../containers/Transactions';
import Screen1 from '../containers/Screen1';
import Screen2 from '../containers/Screen2';
import Screen3 from '../containers/Screen3';
import SignIn from '../containers/SignIn';
import Accounts from '../components/Accounts';
import SignUp from '../containers/SignUp';
// drawer stack
const DrawerStack = createDrawerNavigator({
screen1: { screen: Screen1 },
screen2: { screen: Screen2 },
screen3: { screen: Screen3 },
});
const DrawerNavigation = StackNavigator(
{
DrawerStack: { screen: DrawerStack },
},
{
headerMode: 'float',
}
);
// login stack
const LoginStack = StackNavigator({
transactionsScreen: { screen: Transactions },
});
const initialStack = StackNavigator({
initialScreen: { screen: InitialScreen },
});
// Manifest of possible screens
export const AppNavigation = StackNavigator(
{
initialStack: { screen: initialStack },
drawerStack: { screen: DrawerNavigation },
loginStack: { screen: LoginStack },
},
{
headerMode: 'none',
title: 'Main',
initialRouteName: 'initialStack',
}
);
I'm a beginner and it's highly likely my code structures could be wrong, but this is the basic idea. I have to use navigationV3.
Would someone go through this and advise me on my bad practices on the above code? I want to improve my coding style.
Would someone also create and share a boilerplate for the above scenario? EXPO compactable.