如何存儲 redux state

Question

我是使用 Redux 的初學者，我想在我的應用程序中存儲 redux 的 state，因為每當我刷新頁面 redux 都會重置 state。這是我的 userSlice.js：

import { createSlice } from '@reduxjs/toolkit'
const initialState = {
    userName: null,
    userEmail: null
}

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setActiveUser: (state, action) => {
            state.userName = action.payload.userName
            state.userEmail = action.payload.userEmail

        },
        setUserLogOutState: state => {
            state.userName = null
            state.userEmail = null

        }
    }
});

export const { setActiveUser, setUserLogOutState } = userSlice.actions
export const selectUserName = state => state.user.userName
export const selectUserEmail = state => state.user.userEmail

export default userSlice.reducer

商店.js

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './userSlice'
export default configureStore({
    reducer: {
        user: userReducer
    }
})

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')

注冊.js

 const dispatch = useDispatch()
    const userName = useSelector(selectUserName)
    const userEmail = useSelector(selectUserEmail)
    const onClickButton = (e) => {
        e.preventDefault();
        signInWithGoogle().then((result) => {
            dispatch(setActiveUser({
                name: result.user.displayName,
                email: result.user.email
            }))
        })

    }

那么，每當我刷新頁面時，我究竟如何存儲用戶的 state 呢？

Answer 1

有一些方法。 我想到的是使用localStorage 。 這樣你就可以做類似的事情：

userSlice.js：

const savedState = localStorage.getItem('previousState');
const initialState = savedState ? savedState  : {
  userName: null,
  userEmail: null
}

然后如果之前的state被保存，它就會被初始化。 您需要做的就是在更新 redux state 時更新 localStorage state。

localStorage.setItem('previousState', newReduxState);