реактивная навигация V3 с интегрированным редуксом

Question

Моя цель состоит в том, чтобы внедрить избыточность в мой реактивный проект.Но это не ошибка, это неудачно.Как мне организовать свой код таким образом, чтобы он работал?

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;

.. / redurs / 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 // пожалуйстасчитаю, что все мои экраны глупы для прозрачности ..

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',
  }
);

Я новичок, и весьма вероятно, что мои структуры кода могут быть неправильными, но это основная идея.Я должен использовать навигацию V3.

Может ли кто-нибудь пройти через это и посоветовать мне мои плохие методы работы с приведенным выше кодом?Я хочу улучшить свой стиль кодирования.

Будет ли кто-то также создавать и распространять шаблон для вышеуказанного сценария?EXPO компактный.