reactjs - レデューサーでナビゲーションを処理する必要がありますか? React Native - Wix ナビゲーション

Question

私が達成しようとしているのは、ユーザーが「サインイン」などのボタンをクリックすると、アプリの状態リデューサーで状態を設定するアクションをloading:true起動し、読み込み画面がポップアップすることです。アクションを介してショーの読み込み状態を true に設定するだけで、画面全体でその機能を使用したいと考えています。

レデューサーにナビゲーターがなく、状態を設定した後でもナビゲーションを起動するのが間違っているかどうかはわかりません。レデューサーは自分の状態だけを処理する必要があるように感じます。それは私のアクションファイルにあるべきですか？

私のアプリのこの時点で、すべてが機能します...すべてのコンソールログインが適切なタイミングで起動します。複数の画面で使用できるように、 show lightbox イベントをどこで発生させる必要があるのか​​ わかりません。

ご覧いただきありがとうございます！

パッケージ.json

"dependencies": {
    "axios": "^0.16.2",
    "date-fns": "^1.28.5",
    "lodash": "^4.17.4",
    "native-base": "^2.3.0",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.4",
    "react-native-navigation": "^1.1.143",
    "react-native-vector-icons": "^4.2.0",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-persist": "^4.8.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },

アクション/appStateActions.js

import {
  APP_LOADING_SCREEN,
  APP_LOADING_BUTTON
} from './actionTypes';


export const showLoadingScreen = () => async dispatch => {
  console.log("this is loading screen action");
  dispatch({ type: APP_LOADING_SCREEN, payload: true });

}

export const showLoadingButton = () => async dispatch => {
  console.log("this is loading button action");
  dispatch({ type: APP_LOADING_BUTTON, payload: true });
}

レデューサー/appStateReducer

import{
  APP_LOADING_SCREEN,
  APP_LOADING_BUTTON
} from '../actions/actionTypes';

const INITIAL_STATE = {
  isLoadingScreenVisible: false,
  isLoadingButtonVisible: false
};


export default function(state = INITIAL_STATE, action) {
  switch (action.type){
    case APP_LOADING_SCREEN:
      return { ...state, ...INITIAL_STATE, isLoadingScreenVisible: action.payload };
    case APP_LOADING_BUTTON:
      return { ...state, ...INITIAL_STATE, isLoadingButtonVisible: action.payload };
    default:
      return state;
  }
}

読み込みインジケータはありませんが、ログイン画面は完成していますが、その一部のみを以下に掲載しています

 loginSubmit(){
    this.props.showLoadingScreen(); 
  }

<TouchableOpacity activeOpacity={1.5} onPress={() => this.loginSubmit() }>
   <View style={styles.button}
         <Text style={styles.buttonText}>Sign In</Text> 
   </View>
</TouchableOpacity>

const mapStateToProps = ({ auth }) => {
  const { locationDisplay, locationValue, serviceUrl } = auth;
  
  return { locationDisplay, locationValue, serviceUrl };
};

export default connect(mapStateToProps, {loginUser, showLoadingScreen})(LoginScreen);