Question

我正在尝试使用firebase身份验证登录用户，我遇到了这个问题，当我在操作创建者中使用onAuthStateChanged方法获取用户登录之前或之后。当用户之前登录时，我只是调用登录成功并将其导航到主屏幕，如果不是我只是发送另一个操作并显示登录屏幕，但如果登录成功操作已发送，我仍然会看到登录屏幕半秒，我'我很想回应本地和redux，任何人都可以帮我解决这个问题，非常感谢你们！

这是我的index.js

import { checkLogin } from './actions';

class LoginScreen extends Component {
  componentDidMount() {
    this.props.checkLogin();
  }

  componentWillReceiveProps(nextProp) {
    if (nextProp.loggedIn) {
      this.props.navigation.navigate('main');
    }
  }

  //... some code

  render() {
    if (this.props.isChecking) {
      return <Spinner />
    }
    return this.renderContent();
  }
}

const mapStateToProps = ({ auth }) => {
  const { email, password, error, loading, loggedIn, isChecking } = auth;
  return { email, password, error, loading, loggedIn, isChecking }; 
};

export default connect(mapStateToProps, { 
  emailChanged, passwordChanged, emailLogin, checkLogin 
})(LoginScreen);

这是我的actions.js

import firebase from 'firebase';

export const checkLogin = () => {
  return(dispatch) => {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        dispatch({ type: EMAIL_LOGIN_SUCCESS, payload: user });
      } else {
        dispatch({ type: CHECK_LOGIN_FAILED });
      }
    })
  }
}

// some code

和reducer.js

const INITIAL_STATE = { 
  // ...
  isChecking: true,
}

export default (state = INITIAL_STATE, action) => {
  console.log(action);
  switch (action.type) {
    // ...
    case CHECK_LOGIN_FAILED:
      return { ...state, isChecking: false };
    case EMAIL_LOGIN_SUCCESS:
      return { ...state, user: action.payload, error: '', loading: false, email: '', password: '', loggedIn: true, isChecking: false };
    default: 
      return state;
  }
}

Answer 1

我认为发生这种情况是因为您之前渲染组件的reducer会记住之前的isChecking状态。我打赌如果你重置你不会首先看到登录页面的模拟器的内容和设置。但是，为了解决这个问题，我建议在firebase.auth（）。onAuthStateChanged之前调度一个动作来告诉你的减速器你在＃is; isChecking＆＃34;状态。

在使用native redux进行渲染之前调度一个动作？

1 个答案: