React Native Redux我该如何更新UI，调用不使用标志的API后导航到新屏幕

Question

我正在使用react-native和redux，thunk开发一个移动应用程序，这是我第一次用react-native编写。

我的问题是我调用了一个api，响应是有效的，我想做一些事情作为更新UI，导航到新屏幕...为此，我需要在组件中使用标记来对其进行标记。

这是登录示例，用户登录成功后，我想导航到主屏幕。 为此，我需要在componentWillReceiveProps方法的isLoginSuccess中检查道具中的isLoginSuccess标志，以了解用户是否已成功登录，但是我认为这不是一个好的解决方案。

我的问题是，我们还有其他不用使用标志的方法。

action.js

export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_FAIL = "LOGIN_FAIL";
export const LOGIN = "LOGIN";

export function login(username, password) {
    console.log(username)
    return {
        type: LOGIN,
        username: username,
        password: password
    }
}

export function loginSuccess(data) {
    return {
        type: LOGIN_SUCCESS,
        loginData: data
    }
}

export function loginFail(error) {
    return {
        type: LOGIN_FAIL,
        error: error
    }
}

export function doLogin(username, password) {
    return (dispatch) => {
        dispatch(login(username, password))
        api.login(username, password)
            .then(response => response.json())
            .then(jsonData => {
                console.log(jsonData)
                dispatch(loginSuccess(jsonData))
            })
            .catch((error) => {
                dispatch(loginFail(error))
            })
    }
}

reducer.js

const initialState = {
    loginData:{},
    isLoginDoing : false,
    isLoginSuccess : false,
    username :"",
    password : "",
    error : {},
}

export default function(state = initialState , action ={}){
   switch(action.type){
       case actionType.LOGIN:{
            return {
                ...state,
                username: action.username,
                password: action.password,
                isLoginDoing : true
            }
       }
       case actionType.LOGIN_SUCCESS:{
            return {
                ...state,
                loginData: action.loginData,
                isLoginDoing : false,
                isLoginSuccess : true
            }
       }
       case actionType.LOGIN_FAIL:{
            return {
                ...state,
                isLoginDoing : false,
                isLoginSuccess : false,
                error : action.error
            }
       }
       default :{
           return state
       }
   }
}

component.js

import { connect } from "react-redux"
import { bindActionCreators } from 'redux';
import { doLogin } from '../actions'
import BaseComponent from './baseComponent'   
 class Login extends BaseComponent {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
    }
    this.functionLogin = this.functionLogin.bind(this);
  }

  functionLogin() {
    const { username, password } = this.state;
    if(!this.props.loginReducer.isLoginDoing){
    this.props.doLogin(username, password)
    }
  }
  componentWillReceiveProps (nextProps) {
     console.log("componentWillReceiveProps");
      const { navigate, goBack } = this.props.navigation;
     if(nextProps.loginReducer.isLoginSuccess){
        // this._navigateTo('Home')
        navigate('Home',nextProps.loginReducer.loginData);
     }
  }
  render() {
    const { navigate, goBack } = this.props.navigation;
    return (
      <View style={{ backgroundColor: 'color', marginTop: 10 }} >
        <TextInput
          style={{ height: 40 }}
          placeholder="Username"
          onChangeText={value => this.setState({ username: value })}
        />
        <TextInput
          style={{ height: 40 }}
          placeholder="Password"
          onChangeText={value => this.setState({ password: value })}
        />
        <Button
          onPress={this.functionLogin}
          title="Login"
          color="#841584"
        />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state);
  return {
    loginReducer: state.loginReducer
  };
}
function mapDispatchToProps(dispatch) {
  return {
    doLogin: (username, password) => dispatch(doLogin(username, password))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)

谢谢

Answer 1

在函数doLogin中，可以在dispatch(loginSuccess(jsonData))之后dispatch(loginSuccess(jsonData))导航动作。

例如，react-navigation（如果您已将其与redux集成在一起，如果不是这样，请参见https://reactnavigation.org/docs/guides/redux ）：

dispatch(NavigationActions.navigate({routeName: 'Home'});

（不要忘记import { NavigationActions } from 'react-navigation'; ）