如何在Reactor的reducer中分配axios操作后如何导航到另一个屏幕

Posted 2021-04-27

我了解在动作分派axios承诺后，this.props.isValidUser得到更新。如果用户无效，则显示消息。如果该用户是有效用户，我想导航到另一个屏幕以输入图钉。从动作中获得axios结果后，如何导航到另一个屏幕？

types.js

export const VALIDATE_USER = "VALIDATE_USER";
export const VALIDATE_PIN = "VALIDATE_PIN";
export const GET_ERRORS = "GET_ERRORS";

Reducer.js

import { VALIDATE_USER, VALIDATE_PIN,GET_ERRORS } from "../actions/types.js";

    export default function (state = initialState, action) {
switch (action.type) {
  case VALIDATE_USER:
      return {
        ...state,
        isValidUser: (action.payload == true) ? true : false,
        Id: action.employeeId
      };
 case VALIDATE_PIN:
      return {
        ...state,
        isValidPin: action.payload,
        action: "VALIDATE_PIN",

      };
    default:
      return state;
  }

action.js

import { GET_ERRORS, VALIDATE_USER, VALIDATE_PIN,} from "./types";

export const validateUser = (empId) => dispatch => {

  axios
    .get(
      `${API}/api/Account/ValidateMobileAppUser?employeeId=${empId}`
    )
    .then(res => {
      dispatch({
        type: VALIDATE_USER,
        payload: res.data,
        Id: empId,
       });

    })
    .catch(err => {
      dispatch({
        type: VALIDATE_USER,
        payload: false,
        Id: empId
      });

    });
};

Login.js

  import PropTypes from "prop-types";
import { validateUser } from "../actions/authActions";


class Login extends PureComponent {
  constructor() {
    super();
    this.state = {
      employeeId: "",
      pin: "",
      isValidUser: false,
        }; 
    this.onValidateUser = this.onValidateUser.bind(this);
    this.onEmployeeId = this.onEmployeeId.bind(this);

  }


  onEmployeeId(employeeId) {
    this.setState({ employeeId });
  }


  onValidateUser() {
     this.props.validateUser(this.state.employeeId);

  }


  render() {
    const { loading } = this.props.loading;

    return (
      <KeyboardAvoidingView style={styles.login} >

        <ScrollView showsVerticalScrollIndicator={false}>


          <Block padding={[10, theme.sizes.base * 2]} onPress={Keyboard.dismiss}>
            <Block middle>


              <Input
                placeholder={this.state.placeholder}
                keyboardType={this.state.keyboardType}
                style={[styles.input]}
                value={this.state.employeeId}
                onChangeText={this.onEmployeeId}
              />


              {(this.props.isValidUser == false) ? (

                <Text center style={{ color: "#C00000", marginTop: 15, fontSize: 14 }}>
                  Employee Id  not registered. Please contact HR.
              </Text>

              ) :  ""}


              <Button
                gradient
                style={styles.loginButton}
                onPress={this.onValidateUser}
              >
                <Text white center>
                      Login
                </Text>

              </Button>
            </Block>

            <Button
              onPress={() => this.onGoToStep(1)}
              style={{
                borderWidth: 1,
                borderRadius: 30,
                borderColor: "#E46932"
              }}
            >
              <Text gray caption center style={{ color: "#E46932" }}>
                Don't have an account? Sign Up
           </Text>
            </Button>

          </Block>

        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

Login.propTypes = {
  validateUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired
};

function reducerCallback(state, ownProps) {

if (state.auth.isValidUser == true) {
ownProps.navigation.navigate("mPin", { Id: state.auth.employeeId, type: "LOGIN" });
}
}




const mapStateToProps = (state, ownProps) => ({
 auth: reducerCallback(state, ownProps),
  isValidUser: state.auth.isValidUser,
  errors: state.errors  });


export default connect(
  mapStateToProps,
  {
    validateUser,
  }
)(Login);

this.props.isValidUser == false告诉我用户是否有效。但是，如果用户有效，那么我将使用reducerCallback（）函数导航到另一个屏幕。我不知道这是否是正确的方法。我的问题是从axios异步操作获取返回结果后如何导航到另一个屏幕，以及从axios分派获取回调时如何使用setState设置本地状态。请指导

答案

login.js：

onValidateUser() { this.props.validateUser({ empId: this.state.employeeId, onSuccess: () => { //Navigate to other screen }, onFailure: () => { //Alert error message }, }); }

Action.js：

export const validateUser = ({empId, onSuccess, onFailure}) => dispatch {
  axios
    .get(
      `${API}/api/Account/ValidateMobileAppUser?employeeId=${empId}`
    )
    .then(res => {
      dispatch({
        type: VALIDATE_USER,
        payload: res.data,
        Id: empId,
       });
       onSuccess();
    })
    .catch(err => {
      dispatch({
        type: VALIDATE_USER,
        payload: false,
        Id: empId
      });
      onFailure()
    });
};