1. Redux Toolkit의 비동기 논리 소개
Redux에서 비동기 로직을 처리하려면 액션 유형 생성, 액션 생성자, 다양한 상태(로딩, 성공, 오류)를 처리하기 위한 리듀서 생성과 같은 많은 상용구 코드가 필요한 경우가 많습니다. Redux Toolkit은 최소한의 설정으로 비동기 작업에 대한 "썽크"를 정의할 수 있는 createAsyncThunk를 통해 이를 단순화합니다.
createAsyncThunk:
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 = <p>Loading...</p>; } else if (status === 'succeeded') { content = ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); } else if (status === 'failed') { content = <p>{error}</p>; } return ( <section> <h2>Posts</h2> {content} </section> ); }; export default PostsList;
설명:
useEffect 후크는 구성 요소가 마운트될 때 fetchPosts를 전달하지만 현재 상태가 'idle'인 경우에만 해당됩니다.
렌더링할 콘텐츠(로드 스피너, 게시물 목록 또는 오류 메시지)를 결정하기 위해 상태를 확인합니다.
2단계: 앱에 PostsList 추가
PostsList 구성 요소를 포함하도록 기본 App.js 파일을 업데이트하세요.
// src/App.js import React from 'react'; import PostsList from './features/posts/PostsList'; function App() { return ( <div className="App"> <PostsList /> </div> ); } export default App;
4. 비동기 썽크 모범 사례
구성 요소에서 무거운 논리 방지: 비동기 논리를 처리하기 위해 썽크를 전달하여 구성 요소를 깔끔하게 유지하세요.
오류 처리 중앙 집중화: 각 구성 요소에서 논리를 반복하는 대신 슬라이스의 오류를 처리합니다.
데이터 정규화: 복잡한 데이터 구조를 효율적으로 관리하려면 Normalizr과 같은 라이브러리를 사용하여 상태 형태를 정규화하는 것이 좋습니다.
선택기 메모: 더 나은 성능을 위해 선택기를 메모하려면 reselect에서 createSelector를 사용하세요.
5. 결론 및 다음 단계
이 부분에서는 createAsyncThunk를 사용하여 Redux Toolkit에서 비동기 논리를 처리하는 방법을 살펴보았습니다. 비동기 썽크를 생성하고, 다양한 상태를 처리하고, 이를 구성 요소에서 사용하는 방법을 배웠습니다. 다음 부분에서는 Redux 개발을 더욱 단순화하는 데이터 가져오기 및 캐싱을 위한 강력한 도구인 RTK 쿼리에 대해 자세히 살펴보겠습니다.
_
3부: RTK 쿼리 소개를 기대해주세요!_
위 내용은 완전한 Redux 툴킷 - 비동기 로직(부분 -2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!