我想在页面加载时实现授权用户的逻辑。最初，我想检查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
我如何在我的slice中实现类似的功能？
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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动作可能是不必要的。