ページリロードをしてもstateを保持してログイン状態が持続 するようにしたい。
Navigation.jsを {isAuthenticated ?} でログイン状態の時に表示が変わるように設定しているが、ページリロードをやページ遷移をすると stateがリセットされてしまい、表示が切り替わってしまう。
stateを保持するredux-persistを使用し、公式ページなどを参考にコードを書いてみました。 結果は、 ページ遷移にはログイン状態を保持することができましたが、 ページリロードをするとログイン状態を保持することができませんでした。
ご教授をお願いしたいです。
//src/reduser/store.jsx import { configureStore } from '@reduxjs/toolkit' import authSlice from './authSlice' import postSlice from './postSlice' //redux-persist設定 import storage from 'redux-persist/lib/storage' import { persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } from 'redux-persist' const persistConfig = { key: 'root', storage, } const persistedReducer = persistReducer(persistConfig, authSlice) const store = configureStore({ reducer: { auth: persistedReducer, post: postSlice, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }) export default store
//pages/_app.jsx //redux設定 import { Provider } from 'react-redux' //redux-persist設定 import store from 'src/reducer/store' import { PersistGate } from 'redux-persist/integration/react' import { persistStore } from 'redux-persist' const persistor = persistStore(store) function App({ Component, pageProps }){ return ( <Povider store={store}> <PersistGate persistor={persistor}> <Layout> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> </Head> <Component {...pageProps} /> </Layout> </PersistGate> </Provider> ); }
//src/reducer/authSlice.jsx import { // アカウント登録 REGISTER_SUCCESS, REGISTER_FAIL, //ログイン LOGIN_SUCCESS, LOGIN_FAIL, //アカウント情報取得 USER_SUCCESS, USER_FAIL, //リフレッシュトークン取得 REFRESH_SUCESS, REFRESH_FAIL, // 読み込み中 SET_AUTH_LOADING, REMOVE_AUTH_LOADING, //認証チェック AUTHENTICATED_SUCCESS, AUTHENTICATED_FAIL, LOGOUT_SUCCESS, } from 'actions/types' const initialState = { user: null, isAuthenticated: null, loading: false, } function authReducer(state = initialState, action) { const { type, payload } = action switch (type) { // アカウント登録---------------------------------------------- case REGISTER_SUCCESS: return { ...state, } case REGISTER_FAIL: return { ...state, } //ログイン---------------------------------------------- case LOGIN_SUCCESS: return { ...state, isAuthenticated: true, } case LOGIN_FAIL: return { ...state, isAuthenticated: false, } //アカウント情報取得---------------------------------------------- case USER_SUCCESS: return { ...state, user: payload.user, } case USER_FAIL: return { ...state, user: null, } //リフレッシュトークン取得---------------------------------------------- case REFRESH_SUCESS: return { ...state, } case REFRESH_FAIL: return { ...state, isAuthenticated: false, user: null, } // 読み込み中---------------------------------------------- case SET_AUTH_LOADING: return { ...state, loading: true, } case REMOVE_AUTH_LOADING: return { ...state, loading: false, } // 認証チェック---------------------------------------------- case AUTHENTICATED_SUCCESS: return { ...state, isAuthenticated: true, } case AUTHENTICATED_FAIL: return { ...state, isAuthenticated: false } //ログアウト----------------------------------------------- case LOGOUT_SUCCESS: return { ...state, isAuthenticated: false, user: null, } case LOGIN_FAIL: return { ...state, } default: return state } } export default authReducer
//