react-native navigationV3集成了redux

Question

我的目标是在我的react-native项目中实现redux。但这不是错误，没有成功。如何组织我的代码使其可以正常工作？

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 //请考虑将我所有的屏幕都设为哑屏以提高透明度。

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

我是一个初学者，很可能我的代码结构可能是错误的，但这是基本思想。我必须使用navigationV3。

有人会仔细研究一下，并就上述代码的不良做法向我提供建议吗？我想改善自己的编码风格。

有人还会为上述情况创建并共享一个样板吗？ EXPO可压缩。