我是使用 Redux 的初學者，我想將 redux 的狀態存盤在我的應用程式中，因為每當我重繪 頁面時，redux 都會重置狀態。這是我的 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
store.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
}))
})
}
那么，每當我重繪 頁面時，我究竟如何存盤用戶的狀態呢？
uj5u.com熱心網友回復：
有一些方法。我想到的一個是使用localStorage。這樣，您可以執行以下操作：
用戶切片.js：
const savedState = localStorage.getItem('previousState');
const initialState = savedState ? savedState : {
userName: null,
userEmail: null
}
如果之前的狀態被保存，它將被初始化。您需要做的就是在更新 redux 狀態時更新 localStorage 狀態。
localStorage.setItem('previousState', newReduxState);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/451961.html