Redux 툴킷: 썽크 기능 생성

썽크(Thunk)란 무엇입니까?

프로그래밍에서 썽크라는 단어는 JavaScript의 비동기 함수처럼 지연된 작업을 수행하는 코드 부분을 나타냅니다.

Redux 스토어 자체는 비동기 로직을 ​​처리하지 않습니다. 다음 방법만 알고 있습니다.

1. 동기적으로 작업을 전달합니다.
2. 리듀서를 통해 상태를 업데이트합니다.
3. 상태 변경에 대해 UI에 알립니다.

하지만 그렇다면 어떻게 API를 호출하고 응답에 따라 상태를 업데이트할 수 있습니까? 이 작업에는 일반적으로 시간이 걸립니다. 어떻게 처리하나요?

여기서 썽크 기능이 등장합니다.

썽크 기능이란 무엇입니까?

썽크 함수는 API 호출과 같은 비동기 논리를 처리하기 위해 만들어진 함수입니다. 작업을 디스패치하고 필요한 경우 현재 상태에 액세스하려면 2개의 인수 dispatch와 getState가 필요합니다.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

반환된 함수는 썽크 함수이고 getAllUsers는 이 예에서 썽크 작업 생성자라고 하며 다음과 같이 전달됩니다.

dispatch(getAllUsers())

필요한 경우 썽크 함수에서 사용할 인수와 함께 썽크 작업 생성자를 파견할 수 있습니다.

createAsyncThunk를 사용하여 썽크 생성

Redux Toolkit은 썽크를 쉽게 생성할 수 있는 createAsyncThunk API를 제공합니다.

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserById = createAsyncThunk(
  'user/fetchUserById',
  async (userId) => {
    const user = await someHttpRequest(userId);
    return user;
  }
);

fetchUserById는 여기서 생성된 썽크 함수입니다. createAsyncThunk는 두 가지 인수를 사용합니다:

• 첫 번째 인수는 생성된 작업 유형(예: user/fetchUserById/pending, user/fetchUserById/fulfilled 또는 user/fetchUserById/rejected)에 사용되는 문자열 접두사입니다.
• 두 번째 인수는 '페이로드 생성기' 기능입니다. 필요한 데이터 또는 오류가 포함된 Promise를 반환해야 합니다.

createAsyncThunk를 사용하는 이유는 무엇입니까?

API 호출에 대한 썽크 함수를 생성할 수 있게 하는 것 외에도 createAsyncThunk는 API 요청 상태를 추적하는 작업을 자동으로 전달합니다.

• 보류 중: 요청이 진행 중입니다.
• 이행됨: 요청이 성공했습니다.
• 거부됨: 요청이 실패했습니다.

정말 유용합니다. 예를 들어 상태가 보류 중일 때 UI에 로더를 표시하고 사용자에게 어떤 일이 일어나고 있음을 알릴 수 있습니다.

슬라이스에서 썽크 사용

이제 fetchUserById 썽크를 만들었으므로 userSlice의 extraReducers 필드를 사용하여 상태 상태 변경을 처리할 수 있습니다.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  status: 'idle', // 'idle' | 'pending' | 'succeeded' | 'failed'
  error: null,
};

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    usernameUpdated: (state, action) => {
      state.user.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.user.email = action.payload;
    },
    userDataCleared: (state) => {
      state.user = null;
      state.status = 'idle';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || 'Something went wrong.';
      });
  },
});

export const { usernameUpdated, emailUpdated, userDataCleared } = userSlice.actions;

// Selector for the status to use in the application's components
export const selectStatus = (state) => state.user.status;

createAsyncThunk 조건

API를 호출하기 전에 몇 가지 조건을 확인하고 싶다면 어떻게 해야 하나요? 예를 들어 상태가 이미 보류 중인 경우 이를 두 번 호출하고 싶지 않습니다. 이 경우 createAsyncThunk가 조건을 작성하는 데 허용하는 세 번째 인수를 사용할 수 있습니다.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

Thunk 기능과 함께 Typescript를 사용하는 방법을 알아보려면 Type Checking Redux Thunks를 읽어보세요.

위 내용은 Redux 툴킷: 썽크 기능 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!