Question

我有以下组件

import { View, Text } from 'react-native';
import React, { Component,PropTypes } from 'react';
import styles from './styles';
import { connect } from 'react-redux';
import EditProfile from '../../components/common/EditProfile'
import { saveProfile } from '../../actions/profile'

class Profile extends Component {

_saveProfile(){

    //I want to to dispatch this
    this.props.dispatch(saveProfile());

    //and if success push this route
    this.props.navigator.push({name:'Home'});

    //and if not, want to show an error message
}

render() {
    let {profile} = this.props;
      return (
        <View style={styles.container}>
            <EditProfile
                navigator={this.props.navigator}
                profile={profile}
                onSaveProfile={this._saveProfile.bind(this)}
            />
        </View>
      );
   }
}

Profile.propTypes = {
    navigator: PropTypes.object.isRequired,
};

function mapDispatchToProps(dispatch) {
    return {
        dispatch
    };
}

function mapStateToProps(state) {
    return {
        profile: state.get("profile").profileState
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Profile);

我有以下行动创作者......

import facebook from '../api/facebook'
import * as types from '../constants/ActionTypes';

function saveProfileSuccess(profile){
    return {
        type:type.SAVE_PROFILE_SUCCESS,
        profile:profile
    }
}

function saveProfileError(error) {
    return {
        type:type.SAVE_PROFILE_ERROR,
        errorMessage:error
    }
}

export function saveProfile(profile){
  return dispatch => {
    profile.save(profile,(error,result)=> {
          if(error){
              dispatch(saveProfileError(error);
          }else{
              dispatch(saveProfileSuccess(result);
          }
    ));
  }
}

我还没有在reducer中有任何东西，因为我不确定如何/我需要做什么来有条件地处理保存配置文件，处理API的错误消息，有条件地导航到主屏幕（如图所示）第一段代码片段。

如何从组件调度操作，并有条不紊地离开该组件，以确定是否成功调用API。如果不成功，我显然希望显示错误消息而不导航到另一个视图。

Answer 1

由于我的声誉不够高，我没有资格发表评论。但我有一个疑问。在调用操作方法时，您没有在组件中传递任何参数profile 您在动作创建者文件中使用的this.props.dispatch(saveProfile()) export function saveProfile(profile)。也许我错过了什么。

根据我从您的问题中解释的内容，您希望根据条件在操作方法中执行导航操作。如果是这种情况，解决方案非常简单。只需传递导航器引用（this.props.navigator），以及导航到下一个屏幕所需的参数作为对象，就像在这种情况下{name: 'Home'}一样，作为您在组件中调用的操作的一般方法参数

例如在组件文件中，按如下方式进行调用：

this.props.dispatch(saveProfile(profile, this.props.navigator, {name:'Home'})); // Pass the profile parameter according to your needs

然后在动作创作者中：

export function saveProfile(profile, appNavigator, navProps){
    return dispatch => {
        profile.save(profile,(error,result)=> {
            if(error){
                dispatch(saveProfileError(error);
            }else{
                dispatch(saveProfileSuccess(result);
                appNavigator.push(passProps); //Will push to Home Screen
            }
        });
    }
}

如何根据调度操作的结果有条件地处理React Redux（React Native）中的导航？

1 个答案: