javascript - 在渲染 native redux之前渲染一个 Action ？

我正在尝试使用Firebase身份验证登录用户，并且遇到了以下问题：在操作创建者中使用onAuthStateChanged方法获取用户之前是否登录过。当用户之前登录时，我只是调用登录成功并将其导航到主屏幕，如果不是，我只是调度另一个操作并显示登录屏幕，但是如果调度了登录成功操作，我仍然会看到登录屏幕半秒钟，我将我是新来的响应native和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;
  }
}

最佳答案

我认为发生这种情况是因为化简器从组件的先前呈现中记住了isChecking的先前状态。我敢打赌，如果您重置模拟器的内容和设置，您将不会首先看到登录页面。但是，要解决此问题，我建议在firebase.auth（）。onAuthStateChanged之前调度一个操作，以告诉您的减速器您处于“ isChecking”状态。

关于javascript - 在渲染 native redux之前渲染一个 Action ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47253192/