Je souhaite implémenter la logique d'autorisation des utilisateurs lors du chargement de la page. Au départ, je voulais vérifier s'il y avait un token dans le cookie (checkUserToken），如果有或没有 - 调用另一个函数（fetchUserData），该函数将来会向服务器发出请求。最后，当服务器响应时 - 调用第三个函数（setUserData），该函数将使用用户数据填充userData
'use client'
import { createSlice } from "@reduxjs/toolkit";
import { getCookie } from '@/app/untils/Cookies';
const initialState = {
userData: null
}
export const userSlice = createSlice({
name: "userData",
initialState,
reducers: {
checkUserToken: () => {
console.log('chekc')
const token = getCookie('user-token');
console.log(token)
if (token)
return fetchUserData(token)
else
return fetchUserData(false)
},
fetchUserData: async (state, action) => dispatch => {
return console.log('FETCH')
// console.log(state)
// console.log(action)
},
setUserData: (state, action) => {
console.log('SET USER')
console.log(action)
console.log(state)
}
}
})
export const { checkUserToken, fetchUserData, setUserData } = userSlice.actions
export default userSlice.reducer
Comment puis-je implémenter des fonctionnalités similaires dans ma tranche ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Les fonctions de réduction sont des fonctions pures, elles n'effectuent pas d'effets secondaires comme des actions de répartition.
checkUserToken不能分发任何动作，fetchUserData不能返回函数值。在我看来，checkUserToken和fetchUserDataEn fait, une action asynchrone. Créez une action de réflexion pour eux.Exemple :
import { createSlice, createAsyncAction } from "@reduxjs/toolkit"; import { getCookie } from '@/app/untils/Cookies'; export const checkUserToken = createAsyncAction( "userData/checkUserToken", (_, thunkAPI) => { console.log('check'); const token = getCookie('user-token'); console.log(token); return thunkAPI.dispatch(fetchUserData(token ?? false)); }, ); export const fetchUserData = createAsyncAction( "userData/fetchUserData", async (token, thunkAPI) => { try { console.log('FETCH'); ... 异步获取逻辑 ... return /* 一些数据??? */ } catch(error) { return thunkAPI.rejectWithValue(error)); } }, ); const initialState = { userData: null, }; export const userSlice = createSlice({ name: "userData", initialState, reducers: { setUserData: (state, action) => { console.log('SET USER'); .... } }, extraReducers: builder => { builder .addCase(fetchUserData.fulfilled, (state, action) => { // 使用返回的 action.payload 值更新用户数据 }) .addCase(fetchUserData.rejected, (state, action) => { // 如有必要，设置任何错误状态 }); }, }) export const { setUserData } = userSlice.actions; export default userSlice.reducer;Veuillez noter que
fetchUserData动作可以直接访问 cookies/token，fetchUserData.fulfilledreducer case 也可以设置/更新用户数据状态。这意味着setUserData和checkUserTokenactions peuvent être inutiles.