1. Redux 툴킷의 비동기 논리 소개

Redux에서 비동기 로직을 ​​처리하려면 다양한 상태(로딩, 성공, 오류)를 처리하기 위해 액션 유형, 액션 생성자, 리듀서를 생성하는 등 많은 상용구 코드가 필요한 경우가 많습니다. Redux 툴킷은 최소한의 설정으로 비동기 작업에 대한 "썽크"를 정의할 수 있는 createAsyncThunk를 통해 이를 단순화합니다.

createAsyncThunk:

• 보류, 이행 및 거부된 작업 유형을 자동으로 생성합니다.
• API 요청과 같은 부작용을 더 쉽게 처리할 수 있습니다.
• createSlice를 사용하여 생성된 슬라이스와 원활하게 통합됩니다.

2. API 호출에 createAsyncThunk 사용

공용 API에서 데이터를 가져오고 다양한 로드 상태를 관리하기 위해 비동기 썽크를 만드는 과정을 살펴보겠습니다.

1단계: 간단한 API 서비스 설정
이 예를 시연하기 위해 무료 공개 API를 사용하겠습니다. 게시물 목록을 반환하는 API 엔드포인트가 있다고 가정해 보겠습니다.

2단계: 비동기 썽크 생성
먼저, 기능/포스트 디렉터리 내에 postSlice.js라는 새 조각 파일을 만듭니다. createAsyncThunk를 사용하여 게시물을 비동기적으로 가져옵니다.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

설명:

createAsyncThunk: 이 함수는 문자열 작업 유형과 비동기 함수라는 두 가지 인수를 사용합니다. 비동기 함수는 API 호출이 발생하는 곳입니다. Promise가 해결되면 데이터가 반환되고 이행된 작업 페이로드로 자동 전달됩니다.

extraReducers: createAsyncThunk에 의해 생성된 작업을 처리하는 데 사용됩니다. 우리는 보류, 이행, 거부의 세 가지 상태를 관리합니다.

3. 썽크를 구성 요소에 통합

이제 React 컴포넌트에서 fetchPosts 썽크를 ​​사용하고 데이터를 표시해 보겠습니다.

1단계: PostsList 구성 요소 생성
기능/게시물 디렉터리에 PostsList.js 구성 요소를 만듭니다:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = 
Loading...
;
  } else if (status === 'succeeded') {
    content = (
      

{posts.map((post) => (
• {post.title}
))}

{error}

설명:

useEffect 후크는 구성 요소가 마운트될 때 fetchPosts를 전달하지만 현재 상태가 'idle'인 경우에만 해당됩니다.
렌더링할 콘텐츠(로드 스피너, 게시물 목록 또는 오류 메시지)를 결정하기 위해 상태를 확인합니다.

2단계: 앱에 PostsList 추가

PostsList 구성 요소를 포함하도록 기본 App.js 파일을 업데이트합니다.

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    

      
    
  );
}

export default App;

4. 비동기 썽크 모범 사례

구성 요소에서 무거운 논리 방지: 비동기 논리를 처리하기 위해 썽크를 전달하여 구성 요소를 깨끗하게 유지합니다.
오류 처리 중앙 집중화: 각 구성 요소에서 논리를 반복하는 대신 슬라이스의 오류를 처리합니다.
데이터 정규화: 복잡한 데이터 구조를 효율적으로 관리하려면 Normalizr과 같은 라이브러리를 사용하여 상태 형태를 정규화하는 것을 고려하세요.
선택기 메모: 더 나은 성능을 위해 선택기를 메모하려면 reselect에서 createSelector를 사용하세요.

5. 결론 및 다음 단계
이 부분에서는 createAsyncThunk를 사용하여 Redux Toolkit에서 비동기 논리를 처리하는 방법을 살펴보았습니다. 비동기 썽크를 생성하고, 다양한 상태를 처리하고, 이를 구성 요소에서 사용하는 방법을 배웠습니다. 다음 부분에서는 Redux 개발을 더욱 단순화하는 데이터 가져오기 및 캐싱을 위한 강력한 도구인 RTK 쿼리에 대해 자세히 살펴보겠습니다.

_
3부: RTK 쿼리 소개를 계속 지켜봐주세요!_