web-dev-qa-db-ja.com

firebase.auth（）。onAuthStateChanged（）を配置する場所

私はreactとreduxを使用して基本的なFirebase認証を実装しています。 このリンク にあるreact-routerの例に従って保護されたルートを作成しましたが、これまでのところすべてが正常に機能しています。

ここで、ユーザー認証に設定されている認証リデューサーからユーザーのloggedInステータスを取得しますが、onAuthStateChanged（）を使用してページを更新した後もloggedInステータスを保持したいと思います。

OnAuthStateChanged（）関数はどこに配置すればよいですか？これを使用するためのベストプラクティスはありますか？

以下の参照用の私のコード：

App.js

<PrivateRoute path="/dashboard" component={Dashboard} />
<Route path="/login" component={Login} />

ProtectedRoute.js

const PrivateRoute = ({ component: Component, ...rest }) => {
const { loggedIn } = rest;
return (
    <Route {...rest} render={props => (
      loggedIn ? (<Component {...props} />) : (
        <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
      )
    )} />
  )
}

function mapStateToProps({auth}){
  return {
    loggedIn: auth.loggedIn
  }
}
export default connect(mapStateToProps)(PrivateRoute);

actions_auth.js

export const loginUser = ({ email, password }, callback ) => {
console.log(email, password)
return(dispatch) => {
  dispatch({ type: LOGIN_USER });
  auth.signInWithEmailAndPassword(email, password)
    .then(
      user => { 
        dispatch({
        type: LOGIN_USER_SUCCESS,
      payload: user
    });
    callback();
  },
  error => { 
      console.log( error.message );        
      dispatch({ 
        type: LOGIN_USER_FAIL,
        error: error.message 
      });
    }
  )
 }
}

reducer_auth.js

const INITIAL_STATE = {
  email: '',
  password: '',
  error: '',
  loading: false,
  loggedIn: false
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true, error: '' };
    case LOGIN_USER_SUCCESS:          
      return { ...state, ...INITIAL_STATE, user: action.payload, loggedIn: true };
    case LOGIN_USER_FAIL:
      return { ...state, error: action.error };
    case LOGOUT_USER:
      return { ...state, ...INITIAL_STATE };
    default:
      return state;
  }
};
reactjstypescriptreact-routerfirebase-authenticationreact-redux
10
gianni

Reduxストアを作成する場所、アプリコンポーネントをレンダリングする場所に配置する必要があります。詳細については、 ここ を参照してください。 Firebaseを頻繁に使用する場合は、このすばらしいライブラリをセットアップするために時間をかけることをお勧めします react-redux-firebase

4
ykorach