Ich möchte die Logik der Autorisierung von Benutzern beim Laden der Seite implementieren. Zunächst wollte ich prüfen, ob sich im Cookie ein Token befindet (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
Wie kann ich ähnliche Funktionen in meinem Slice implementieren?
Reducer函数是纯函数，它们不会执行像分发动作这样的副作用。
checkUserToken不能分发任何动作，fetchUserData不能返回函数值。在我看来，checkUserToken和fetchUserData实际上是异步动作。为它们创建一个thunk action。示例：
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;请注意，
fetchUserData动作可以直接访问 cookies/token，fetchUserData.fulfilledreducer case 也可以设置/更新用户数据状态。这意味着setUserData和checkUserToken动作可能是不必要的。