React Native Redux如何更新UI，在未使用標誌的調用API之後導航到新屏幕

Question

我正在使用react-native和redux，thunk開發移動應用程序，這是我第一次通過react-native 。

我的問題是我打電話api和響應是有效的，我想做一些更新的用戶界面，導航到新的屏幕......爲此，我將需要在我的組件標記它使用的標誌。

這是登錄示例，用戶登錄成功後，我想導航到主屏幕。爲了做到這一點，我需要檢查一個標誌isLoginSuccess在方法componentWillReceiveProps的方法道具知道用戶已登錄成功與否，但我認爲這不是好的解決方案。

我的問題是我們有其他方式可以不使用標誌。

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))。

例如，對於反應的導航（如果你有終極版整合它，如果不是這種情況，請參見https://reactnavigation.org/docs/guides/redux）：

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

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