React native 反应本机+；Redux组件在存储操作之前呈现'；完成了

我已经使用redux对本机应用程序进行了响应，用户在成功登录后可以访问主组件。但主组件在通过存储接收用户配置文件之前会被渲染。如果我使用“主”组件作为连接组件，则在重新渲染时它将接收配置文件

这是一个正确的流程，或者我是否能够延迟“Home”的呈现，直到存储区填充了新数据

这是代码

类型

减速器

export default function profile(state = {}, action) {

  switch (action.type) {

  case types.FETCH_PROFILE:

    return {
      ...state,
      profile: action.profile
    }

  case types.UPDATE_PROFILE:

    return {
      ...state,
      profile: action.profile
    }

  case types.DELETE_PROFILE:

    return {
      ...state,
      profile: null
    };

  default:
    return state;
  }
}

行动

var PROFILE_KEY = "@myApp:profile";

export function fetchProfile() {
  return dispatch => {
    AsyncStorage.getItem(PROFILE_KEY)
      .then((profileString) => {
        dispatch({
          type: types.FETCH_PROFILE,
          profile: profileString ? JSON.parse(profileString) :  {}
        })
      })
  } 
}

export function updateProfile(data) {
  return dispatch => {
    AsyncStorage.setItem(PROFILE_KEY, JSON.stringify(data))
      .then(() => {
        dispatch({
          type: types.UPDATE_PROFILE,
          profile: data
        })
      })
  }
}

export function deleteProfile() {
  return dispatch => {
    AsyncStorage.removeItem(PROFILE_KEY)
      .then(() => {
        dispatch({
          type: types.DELETE_PROFILE
        })
      })
  }
}

登录组件

class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      error: "",
      showProgress: false,
    };
  }

  _focusNextField(nextField) {
    this.refs[nextField].focus();
  }

  _onLoginPressed() {
    this.setState({showProgress: true});
    this._login();
  }

  async _login() {
    try {
      let response = await fetch( BASE_URL + url, {
                             method: 'POST',
                             headers: {
                               'Accept': 'application/json',
                               'Content-Type': 'application/json',
                             },
                             body: JSON.stringify({
                               user: {
                                 email: this.state.username,
                                 password: this.state.password,
                               }
                             })  
                           });

      let res = await response.text();
       if (response.status >= 200 && response.status < 300) {
          let user = JSON.parse(res);
          this.props.updateProfile(user.user);
          this.setState({showProgress: false});
          this.props.navigator.replace({name: 'Home'});
       }
       else {
         let error = JSON.parse(res);
         throw error.errors;
       }
    } catch(error) {
        this.setState({error: error});
        this.setState({showProgress: false});
        console.log("error " + error);
    }
  }

  render() {
    return (
        <View style={styles.loginBox}>
          <TextInput
            ref="username"
            value={this.state.username}
            placeholder="Username" 
            keyboardType="email-address"
            onChangeText={(username) => this.setState({username}) }
            onSubmitEditing={() => this._focusNextField('password')}/> 
          <TextInput 
            ref="password"
            placeholder="Password" 
            value={this.state.password}
            secureTextEntry={true} 
            onChangeText={(password) => this.setState({password}) }
            returnKeyType="go"/>
          <Button textStyle={{fontSize: 14}} onPress={this._onLoginPressed.bind(this)} style={{marginTop: 30}}>
            Sign In
            </Button>
        </View>
      );
  }
}

const styles = StyleSheet.create({
  loginBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignItems: 'stretch',
    margin: 10,
  }
});

var {updateProfile} = require('../Actions');
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

module.exports = connect(
  null,
  (dispatch) => {
    return bindActionCreators({updateProfile}, dispatch)
  }
)(Login)

类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
错误：“”，
showProgress:false，
};
}
_focusNextField（下一个字段）{
this.refs[nextField].focus（）；
}
_onLoginPressed（）{
this.setState（{showProgress:true}）；
这个；
}
异步登录（）{
试一试{
let response=wait fetch（基本URL+URL{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
用户：{
电子邮件：this.state.username，
密码：this.state.password，
}
})  
});
let res=等待响应。text（）；
如果（response.status>=200&&response.status<300）{
让user=JSON.parse（res）；
this.props.updateProfile（user.user）；
this.setState（{showProgress:false}）；
this.props.navigator.replace（{name:'Home'}）；
}
否则{
let error=JSON.parse（res）；
抛出错误；
}
}捕获（错误）{
this.setState（{error:error}）；
this.setState（{showProgress:false}）；
console.log（“错误”+错误）；
}
}
render（）{
返回(
this.setState（{username}）}
onSubmitEditing={（）=>this.\u focusNextField（'password'）}/>
this.setState（{password}）}
returnKeyType=“go”/>
登录
);
}
}
const styles=StyleSheet.create({
登录框：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
对齐项目：“拉伸”，
差额：10，
}
});
var{updateProfile}=require（'../Actions'）；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
module.exports=connect(
无效的
（调度）=>{
返回bindActionCreators（{updateProfile}，dispatch）
}
)（登入）

家

class Home扩展了React.Component{
render（）{
返回(
我在抽屉里！
身份验证密钥：{this.props.profile？this.props.profile.authentication_-token:'authentication_-token'}
);
}
}
//module.exports=Home；
从'react redux'导入{connect}；
module.exports=connect(
（州）=>{
返回{
profile:state.profile
}
},
无效的
)（家）

如果使用的是

redux-thunk

，则可以延迟转换，直到加载数据。你需要改变一些小事情

向action creator添加

return

export function updateProfile(data) {
  return dispatch => {
    return AsyncStorage.setItem(PROFILE_KEY, JSON.stringify(data))
      .then(() => {
        dispatch({
          type: types.UPDATE_PROFILE,
          profile: data
        })
      })
  }
}

添加

wait

if (response.status >= 200 && response.status < 300) {
  let user = JSON.parse(res);
  await this.props.updateProfile(user.user);
  this.setState({showProgress: false});
  this.props.navigator.replace({name: 'Home'});
}

if（response.status>=200&&response.status<300）{
让user=JSON.parse（res）；
等待这个.props.updateProfile（user.user）；
this.setState（{showProgress:false}）；
this.props.navigator.replace（{name:'Home'}）；
}

如果使用的是

redux-thunk

，则可以延迟转换，直到加载数据。你需要改变一些小事情

向action creator添加

return

export function updateProfile(data) {
  return dispatch => {
    return AsyncStorage.setItem(PROFILE_KEY, JSON.stringify(data))
      .then(() => {
        dispatch({
          type: types.UPDATE_PROFILE,
          profile: data
        })
      })
  }
}

添加

wait

if (response.status >= 200 && response.status < 300) {
  let user = JSON.parse(res);
  await this.props.updateProfile(user.user);
  this.setState({showProgress: false});
  this.props.navigator.replace({name: 'Home'});
}

if（response.status>=200&&response.status<300）{
让user=JSON.parse（res）；
等待这个.props.updateProfile（user.user）；
this.setState（{showProgress:false}）；
this.props.navigator.replace（{name:'Home'}）；
}

为什么不在

中显示一个忙碌的微调器，直到组件收到它需要的数据。。。这并不是一个真正的反应问题，只是我正在做的异步软件的性质，但在我的另一个组件中，我需要为另一个api调用配置文件。这有点困难。但给出的解决方案真的很棒，感谢@caojs为什么不在

中显示一个繁忙的微调器，直到组件接收到它需要的数据。。。这并不是一个真正的反应问题，只是我正在做的异步软件的性质，但在我的另一个组件中，我需要为另一个api调用配置文件。这有点困难。但给出的解决方案真的很棒，这要感谢@caojs