Cfrgtkky

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.