我应该在减速器中处理导航吗？ React Native - Wix 导航答案

【问题标题】：Should I handle navigation in my reducer? React Native - Wix Navigation我应该在减速器中处理导航吗？ React Native - Wix 导航
【发布时间】：2017-08-12 19:19:22
【问题描述】：

我想要完成的是，当用户点击一个按钮（例如“登录”）时，我触发我的操作，将我的应用状态缩减程序中的状态设置为 loading:true，然后弹出加载屏幕。我希望通过一个操作将我的显示加载状态设置为 true，从而在我的屏幕上使用该功能。

我不知道在我的减速器中安装导航器是否错误，即使在设置我的状态后也让它触发导航。我觉得我的减速器应该处理我的状态，而不是别的。它应该在我的操作文件中吗？

在我的应用程序的这一点上，一切正常......所有控制台登录都会在正确的时间触发。我只是不确定应该在哪里触发show lightbox event，以便我可以在多个屏幕上使用。

感谢您的收看！

package.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"
  },

actions/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 });
}

reducers/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);

【问题讨论】：

哪些屏幕或哪些屏幕可见是应用状态的一部分。
能否详细说明

标签： reactjs react-native redux react-redux react-native-navigation

【解决方案1】：

我在 Swift 原生代码中使用 Redux 设置，而不是 react-native。我的状态的一部分是当前屏幕堆栈的数组，我有一个组件来监视该状态的一部分，并根据该数组中的内容显示或关闭屏幕。使屏幕出现或消失只需在该数组中添加/删除项目，其余的由组件负责。通过查看我所在状态下的数组，我可以轻松查看当前呈现的屏幕...

【讨论】：

【解决方案2】：

我的理解是，你的 reducer 应该保持纯函数，不会产生任何副作用。所以，简而言之，不——你可能不应该在 reducer 中处理导航。

【讨论】：

【解决方案3】：

在反应中，我们使用了像 saga 这样的中间件。因为我们在响应成功或失败时调度操作。如果成功并且如果您想导航，则可以根据条件在 saga 内部使用它。假设我想在响应到达后导航，然后我可以使用 if 语句并导航屏幕。

【讨论】：