Saya mahu melaksanakan logik membenarkan pengguna apabila halaman dimuatkan. Pada mulanya, saya ingin menyemak sama ada terdapat token dalam kuki (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
Bagaimana saya boleh melaksanakan fungsi yang serupa dalam kepingan saya?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Fungsi pengurangan adalah fungsi tulen, ia tidak melakukan kesan sampingan seperti tindakan penghantaran.
checkUserToken不能分发任何动作，fetchUserData不能返回函数值。在我看来，checkUserToken和fetchUserDataSebenarnya tindakan tak segerak. Buat tindakan thunk untuk mereka.Contoh:
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;Sila ambil perhatian bahawa
fetchUserData动作可以直接访问 cookies/token，fetchUserData.fulfilledreducer case 也可以设置/更新用户数据状态。这意味着setUserData和checkUserTokentindakan mungkin tidak perlu.