Firebase，React和Redux等待存储更新 [英] Firebase, react and redux wait for store to update

问题描述

我有一个连接到Firebase的React应用程序，我想检查用户是否在每次页面刷新时登录，调度IS_SIGNED_IN操作，这是操作创建者:

I have a React app connected to Firebase, i want to check if user is logged in at every page refresh, dispatching IS_SIGNED_IN action, here's the action creator:

export function checkAuth() {
return dispatch => {
    firebaseAuth().onAuthStateChanged((user) => {
        if (user) {
            dispatch(signedInAction())
        } else {
            dispatch(signedOutAction())
        }
    })
  }
}

在化简器中，我只是将布尔值isAuthenticated设置为true/false:

Inside the reducer i just make boolean isAuthenticated to true/false:

case ActionTypes.isSignedIn: {
    return Object.assign({}, state, {
        isAuthenticated: true
    })
}
case ActionTypes.isSignedOut: {
    return Object.assign({}, state, {
        isAuthenticated: false
    })
}

因为我想检查应用程序加载时用户是否登录，所以我在componentDidMount上分派了动作(我猜这是错误的):

Because i want to check if user is signed in when app loads i dispatch the action at componentDidMount (which is wrong i guess):

class Main extends Component {

constructor(props) {
    super(props);
}

componentDidMount() {
    store.dispatch(checkAuth());
}

render() {
    return (
        <Provider store={store}>
            <Router>
                <Theme>
                    <Routes />
                </Theme>
            </Router>
        </Provider>
    );
  }
}

这使我检查isAuthenticated的代码失败，因为尚未在商店中设置它，例如，这在Routes组件中.解决这个问题的最佳方法是什么?总而言之，我知道我可以使用条件渲染并检查是否定义了isAuthenticated，但是我不喜欢这种解决方案.有什么想法吗?谢谢

This makes my code where i check for isAuthenticated fail, because it's not yet set in the store, this is in Routes component for example. What would be the best way to solve this? To add up, i know i can use conditional rendering and check to see when isAuthenticated is defined, but i don't like that solution. Thoughts? Thanks

推荐答案

我已经完成了您尝试使用实时应用程序进行的操作，并在其中使用了Firebase Auth.您只需要将操作用作登录和注销，然后使用componentWillMount()和componentWillReceiveProps()来检查用户是否已登录:

I have done what you are trying to do with a live application and used in it Firebase Auth. You need to use the Actions as a login and logout only then use componentWillMount() and componentWillReceiveProps() to check if the user is logged in:

动作:

import { auth } from '../fire';
export const GET_USER = 'get_user';

export function getUser(){
    return dispatch => {
        auth.onAuthStateChanged(user=>{
            dispatch({
                type: GET_USER,
                payload: user
            });
        });
    };
}

export function login(email,password){
    return dispatch => auth.signInWithEmailAndPassword(email, password);
}

export function logout(){
    return dispatch => auth.signOut();
}

export function createAccount(email, password){
    return dispatch => auth.createUserWithEmailAndPassword(email, password);
}

您的Reducer应该有这个:

your Reducer should have this:

import {GET_USER} from '../Actions/UserActions';

export default function( state = {loading:true}, action){
    switch (action.type){
        case GET_USER:
            return { loading: false, ...action.payload };
        default:
        return state;
    }
}

例如，在您的App.js中，

在它的开头使用以下代码:

in your App.js for example, just in the start of it use this:

 componentWillMount(){
   this.props.getUser();
   if(this.props.user.loading === false && this.props.user.email === undefined){
     this.props.history.replace('/Login');
   }
 }

 componentWillReceiveProps(nextProps){
  if(nextProps.user.loading === false && nextProps.user.email === undefined){
    this.props.history.replace('/Login');
  }
 }

这是因为您已经在道具中拥有Auth凭据.

this is because you have your Auth credentials in your props already.

我希望这对您有用.

这篇关于Firebase，React和Redux等待存储更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！