Question

我想要完成的是当用户点击按钮时，例如＆＃34;登录＆＃34;，我触发我的动作，将我的应用状态缩减器中的状态设置为loading:true并且弹出加载屏幕。我希望通过一个动作将我的show loading状态设置为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"
  },

动作/ 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);

Answer 1

我在Swift本机代码中使用Redux设置而不是本机反应。我的状态的一部分是当前屏幕堆栈的数组，我有一个组件监视状态的这一部分，并根据该数组中的内容显示或解除屏幕。使屏幕显示或消失只是向/从该数组添加/删除项目的问题，组件负责其余部分。通过在我的状态中查看该数组，我可以很容易地看到当前显示的屏幕......

Answer 2

My understanding says that your reducer should remain a pure function without issuing any side effects. So, in short, no - you probably should not handle navigation in the reducer.

Answer 3

在 React 中，我们使用了像 saga 这样的中间件。因为当我们的响应成功或失败时我们会发送 action。如果成功并且您想导航，则可以根据条件在 saga 中使用它。假设我想在响应到达后导航，然后我可以使用 if 语句和导航屏幕。

我应该在减速机中处理导航吗？ React Native - Wix Navigation

谢谢你的期待！

的package.json

动作/ appStateActions.js

减速器/ appStateReducer

3 个答案: