Firebaseを利用した認証機能の作成(1) actionとreducer (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

認証機能を実装します。react-redux-firebaseのAPIを利用します。

ユーザ情報の保存先の設定

始めにindex.jsのcreateStoreWithFirebaseを変更します。

src/index.js

const createStoreWithFirebase = compose(
  applyMiddleware(thunk.withExtraArgument({getFirebase})),
  reactReduxFirebase(firebase, {userProfile: 'users'})  // 変更
)(createStore);

reactReduxFirebaseの引数に{userProfile: 'users’}を追加します。このようにすると、Firebase Realtime Databaseの/userパスにユーザのデータが保存されます。(/userのデータはSTEP 3で使用します。)

ログイン・ログアウトactionの作成

ログインとログアウトのactionを作成します。公式のAuthのページを参考に進めていきます。

src/actions/index.js

下記を追加します。

// auth actions
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const LOGIN_ERROR = 'LOGIN_ERROR'
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
export const LOGOUT_ERROR = 'LOGOUT_ERROR'

認証actionを実装します。

src/actions/authActions.js(新規ファイル)

import { LOGIN_SUCCESS, LOGIN_ERROR, LOGOUT_SUCCESS, LOGOUT_ERROR } 
  from './'

const loginSuccess = () => ({
  type: LOGIN_SUCCESS
})

const loginError = (err) => ({
  type: LOGIN_ERROR,
  err
}) 

const logoutSuccess = () => ({
  type: LOGOUT_SUCCESS
})

const logoutError = (err) => ({
  type: LOGOUT_ERROR,
  err
})

export const loginWithGoogle = () => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    firebase.login({provider: 'google'}) // #1
    .then(() => {
      dispatch(loginSuccess());
    }).catch(err => {
      dispatch(loginError(err));
    });
  }
}

export const logout = () => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    firebase.logout()  // #2
    .then(() => {
      dispatch(logoutSuccess());
    }).catch(err => {
      dispatch(logoutError(err));
    });
  }
}

ログインを行います(#1)。providerにgoogleを指定します。
ログアウトを行います(#2)。

actionの中心となるのは、上記の2行のコードだけです。非常に短いコードでログイン、ログアウトが実装できました。

reducerの実装

reducerの実装をします。ログアウト時に設定をクリアします。

src/reducers/todos.js

import { LOGOUT_SUCCESS, ADD_TODO_REQUEST, ADD_TODO_SUCCESS, ADD_TODO_ERROR,
  TOGGLE_TODO_REQUEST, TOGGLE_TODO_SUCCESS, TOGGLE_TODO_ERROR }
   from '../actions/'

const todos = (state = {}, action) => {
  switch (action.type) {
    // 中略
    case LOGOUT_SUCCESS :  // 追加
      return {}
    default:
      return state
  }
}

src/reducers/visibilityFilter.js

import { LOGOUT_SUCCESS, SET_VISIBILITY_FILTER } from '../actions/' // 変更
// 中略

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
  switch (action.type) {
    // 中略
    case LOGOUT_SUCCESS:   // 追加
      return VisibilityFilters.SHOW_ALL
    default:
      return state
  }
}