Handeln innerhalb von Aktionen: Nutzen Sie verschachtelte Aktionen, um bei Ihrem nächsten Redux einen Unterschied zu machen

Question

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?

Answer 1

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.fulfilled reducer case 也可以设置/更新用户数据状态。这意味着 setUserData 和 checkUserToken 动作可能是不必要的。