react-reduxにて、storeの値を取得してからactionをdispatchする方法

Question

環境

axios: "0.20.0",
react: "16.13.1",
react-dom: "16.13.1",
react-redux: "7.2.1",
redux-thnx : "2.3.0"

コード

import * as actionTypes from './actionType';
import axios from 'axios';
import { useSelector } from 'react-redux';
import { store } from '../../index';

export const authStart = () => {
  return {
    type: actionTypes.AUTH_START,
  };
};

export const authSuccess = (token,uid) => {
  return {
    type: actionTypes.AUTH_SUCCESS,
    token: token,
    uid:uid
  };
};

export const setUid = (uid) => {
  return {
    type: actionTypes.SET_UID,
    uid: uid,
  };
};

export const authFail = (error) => {
  return {
    type: actionTypes.AUTH_FAIL,
    error: error,
  };
};

export const logout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('expirationDate');
  axios
    .post('http://localhost:8000/rest-auth/logout/')
    .then((res) => {
      console.log(res.json());
    })
    .catch((err) => {
      console.log(err);
    });
  return {
    type: actionTypes.AUTH_LOGOUT,
  };
};

// ========================    ========================    ========================    ========================

// 以下redux-thunx用のasync action creator　=========      ============       =============-    ===========

export const checkAuthTimeout = (expirationTime) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(logout());
    }, expirationTime * 1000);
  };
};

export const getUserId = (username) => {
  return (dispatch) => {
    axios.get('http://localhost:8000/api/user').then((res) => {
      const users = res.data;
      const currentUser = users.filter((user) => user.username === username)[0];
      const uid = currentUser.id;
      dispatch(authSuccess(localStorage.getItem('token'), uid));
    });
  };
};

export const authLogin = (username, password) => {
  return (dispatch) => {
    dispatch(authStart());
    axios
      .post('http://localhost:8000/rest-auth/login/', {
        username: username,
        password: password,
      })
      .then((res) => {
        const token = res.data.key;
        const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
        localStorage.setItem('token', token);
        localStorage.setItem('expirationDate', expirationDate);
        dispatch(getUserId(username));
        dispatch(checkAuthTimeout(3600));
      })
      .catch((err) => {
        dispatch(authFail(err));
      });
  };
};

export const authSignup = (username, email, password) => {
  return (dispatch) => {
    dispatch(authStart());
    axios
      .post('http://localhost:8000/rest-auth/registration/', {
        username: username,
        email: email,
        password: password,
      })
      .then((res) => {
        const token = res.data.key;
        const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
        localStorage.setItem('token', token);
        localStorage.setItem('expirationDate', expirationDate);
        // getUserId内でauthSuccessが実行され、auth_SUCCESSへuid, tokenがセット
        dispatch(getUserId(username));
        dispatch(checkAuthTimeout(3600));
      })
      .catch((err) => {
        dispatch(authFail(err));
      });
  };
};

export const authCheckState = () => {
  return async(dispatch) => {
    const token = localStorage.getItem('token');
    if (token === undefined) {
      dispatch(logout());
    } else {
      const expirationDate = new Date(localStorage.getItem('expirationDate'));
      if (expirationDate <= new Date()) {
        dispatch(logout());
      } else {
        //
        //uidを取得してからauthSuccessを実行させたいです。
        const uid = await store.getState().uid;
        dispatch(authSuccess(token, uid));
        console.log("uid is " + uid + " and token is " + token)
        dispatch(checkAuthTimeout((expirationDate.getTime() - new Date().getTime()) / 1000));
      }
    }
  };
};

import * as actionTypes from './actionType';
import { updateObject } from '../utility';

const initialState = {
  token: null,
  error: null,
  loading: false,
  uid: null,
};

const authStart = (state, action) => {
  return updateObject(state, {
    error: null,
    loading: true,
  });
};

const authSuccess = (state, action) => {
  // updateObjectによりstateの更新をfunction化
  return updateObject(state, {
    token: action.token,
    error: null,
    loading: false,
    uid : action.uid
  });
};

const authFail = (state, action) => {
  return updateObject(state, {
    error: action.error,
    loading: false,
  });
};

const authLogout = (state, action) => {
  return updateObject(state, {
    token: null,
    uid: null,
  });
};

const setUid = (state, action) => {
  return updateObject(state, {
    uid: action.uid,
  });
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.AUTH_START:
      return authStart(state, action);
    case actionTypes.AUTH_SUCCESS:
      return authSuccess(state, action);
    case actionTypes.AUTH_FAIL:
      return authFail(state, action);
    case actionTypes.AUTH_LOGOUT:
      return authLogout(state, action);
    default:
      return state;
  }
};

export default reducer;

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from './reducks/auth/actions';
import { Link } from 'react-router-dom';

import Register from './containers/Pages/Register';
import Login from './containers/Pages/Login';
import Add_Want_Item from './containers/Pages/Add_Want_Item';

class App extends Component {
  componentDidMount() {
    // tokenがローカルに存在してるかの確認、expirationdateの期限確認
    this.props.onTryAutoSignup();
  }

  render() {
    return (
      <Router>
        {/* Route内のRoutePassはpropsを渡す役割を果たす */}
        <Route
          exact
          path="/registration"
          render={(routeProps) => <Register {...routeProps} {...this.props} />}
        />
        <Route
          exact
          path="/login"
          render={(routeProps) => <Login {...routeProps} {...this.props} />}
        />
        <Route exact path="/user/want/add" component={Add_Want_Item} />
      </Router>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.token !== null,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onTryAutoSignup: () => dispatch(actions.authCheckState()),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

やりたいこと

actions内で、ストアからのuid取得を待ち、uidを取得した後にuidを引数とするauthSuccessをdispatchしたいです。

問題点

actionの一つauthCheckState内におけるdispatch(authSuccess(token, uid))でuidが取得されないまま処理が進んでしまうことで、uidがnullになり、結果、actionauthSuccessによってstateがuid : nullに書き換えられてしまうことです。

最終的に私が行いたいのは、uidをログインしているユーザーのものにすることです。
ログイン時、または、新規登録時にuidを更新することには成功しているのですが(actionauthSignup, authLogin参照)、画面遷移を行うとuidがnullに上書きされてしまいます。
原因は、App.jsx内でauthCheckStateがdispatchされた時に、authSuccessの引数の一つであるuidが、ログイン済みユーザーのIDを持たないままdispatchされたことにより、state のuidがnullへ変わってしまうために起きていると私は考察しています。

解決法として、authCheckState内でstoreからuidを取得してきて、それをauthSuccessの引数に入れるということを思いつき、async/awaitで実装をしてみました。しかし、依然としてuidはnullのままだったため、store.getState()の処理の完了が待たれずにauthSuccessが実行されている様に思われます。

どの様にすれば、uidとauthSuccess間の非同期を制御し、uidをauthSuccessに入れることができるかを教えていただきたいです。

分かりづらい説明となってしまい、大変申し訳ありません。
ご回答いただければ幸いです。
よろしくお願いいたします。

Answer 1

修正の一案として、以下のようにしてみるのはいかがでしょうか？

• getUserId の成功時に user id も localStorage に保存しておく。
• authCheckState では localStorage に user id が入っているかを確認し、
• 入っていれば、 authSuccess をdispatch する。

コードではこんな感じの修正になります。

  export const getUserId = (username) => {
    return (dispatch) => {
      axios.get('http://localhost:8000/api/user').then((res) => {
        const users = res.data;
        const currentUser = users.filter((user) => user.username === username)[0];
        const uid = currentUser.id;
+       localStorage.setItem('userId', uid);
        dispatch(authSuccess(localStorage.getItem('token'), uid));
-     });
+     })
+     .catch((err) => {
+       localStorage.removeItem('userId');      
+     });
    };
  };

  // uidを取得してからauthSuccessを実行させたいです。
- const uid = await store.getState().uid;
- dispatch(authSuccess(token, uid));
+ const uid = localStorage.getItem('userId');
+ if (uid) {
+   dispatch(authSuccess(token, uid));
+ }

補足として、このご質問のような状況のときに、役に立ちそうなモジュールを紹介します。

ログインAPIから返されたトークンなどのログイン情報を、localStorageに入れて永続化させるというのはよくあるケースです。その際に、redux state に入っているログイン情報とlocalStorageに保存しているログイン情報との整合性を保つコードを自分で書くのは、様々なログイン関連のユースケースに対応していくうちにコードが煩雑になってきがちです。上記に挙げたコード修正案も、そのような煩雑さが今後も増大していくことを予感させるものになっている、とも言えます。この問題を解消するために、localStorage への永続化を任せられる redux-persist を使うとよいかもしれません。Qiita にも、「使ってみました」という趣旨の記事がいくつか 投稿されています。

以上、参考になれば幸いです。

Comments

[Toshiyuki023]

ご回答いただき誠にありがとうございます。

ご助言の甲斐あり、実装に成功することができました。また、有益なパッケージも紹介していただき、本当にありがとうございます。

まだまだ初心者ですので、質問することが多々あると思いますが、また機会があればご回答いただければ幸いです。

ありがとうございました。

[jun68ykt]

どういたしまして
> 実装に成功することができました。
とのことで、よかったです????

Answer 2

reduxの処理内で非同期を扱う場合redux-sagaの導入がおすすめです。

• redux-saga公式

Aアクションのdispatchを待ってからBアクションをdispatchや、処理中でstoreから特定の値を取得などを管理できます。

下記記事が参考になるかと思います。

• redux-sagaで非同期処理と戦う