Heim  >  Fragen und Antworten  >  Hauptteil

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

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?

P粉614840363P粉614840363418 Tage vor473

Antworte allen(1)Ich werde antworten

  • P粉459440991

    P粉4594409912023-09-18 00:41:32

    Reducer函数是纯函数,它们不会执行像分发动作这样的副作用。 checkUserToken 不能分发任何动作,fetchUserData 不能返回函数值。在我看来,checkUserTokenfetchUserData 实际上是异步动作。为它们创建一个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 也可以设置/更新用户数据状态。这意味着 setUserDatacheckUserToken 动作可能是不必要的。

    Antwort
    0
  • StornierenAntwort