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'; ）