### 実現したいことページリロードをしても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 ( ); } ``` ``` //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 ``` // ### 補足情報

質問

受付中Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]DjangoNext.js初心者2023/04/26 19:18

解決済Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築 redux についてDRFNext.js初心者2023/02/25 21:25

質問

受付中Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]DjangoNext.js初心者2023/04/26 19:18

解決済Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築 redux についてDRFNext.js初心者2023/02/25 21:25

受付中
Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]
Django
Next.js
初心者
2023/04/26 19:18

解決済
Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築 redux について
DRF
Next.js
初心者
2023/02/25 21:25

受付中
Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]
Django
Next.js
初心者
2023/04/26 19:18

解決済
Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築 redux について
DRF
Next.js
初心者
2023/02/25 21:25