React Redux에서 API를 호출하는 방법은 무엇입니까?

안녕하세요, 오늘 우리는 get 요청을 호출하고 데이터를 표시하는 간단한 React 애플리케이션을 빌드할 것입니다. 우리는 이 애플리케이션에 Redux를 사용하고 있으며 Redux는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리입니다. Redux에 익숙하지 않은 경우 Redux 설명서에서 Redux 기본 사항을 읽는 것이 좋습니다. 더 나은 이해를 위해 데모 비디오를 시청하십시오.

그럼 코딩을 시작해 볼까요?

데모 비디오

Source Code

프로젝트 구조

반응 앱 만들기

$ npx create-react-app react-redux-api
$ cd react-redux-api
$ npm start

종속성 설치

Redux : 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리입니다.
Axios : 사용하기 쉬운 API를 지원하는 약속 기반 HTTP 클라이언트입니다.
React-Redux : React Redux는 Redux의 공식 React Ui 바인딩 레이어입니다.
@reduxjs/toolkit : 깨끗한 redux 코드를 작성하고 가장 널리 사용되는 Redux 애드온과 함께 제공됩니다.

API 작업 만들기
src/store/api.js

import { createAction } from "@reduxjs/toolkit";

export const apiCallBegan = createAction("api/callBegan");
export const apiCallSucess = createAction("api/callSuccess");
export const apiCallFailed = createAction("api/callFailed");

API 미들웨어 생성
src/store/미들웨어/api.js

import axios from "axios";
import * as actions from "../api";

const api =
    ({ dispatch }) =>
    (next) =>
    async (action) => {
        if (action.type !== actions.apiCallBegan.type) return next(action);

        const { url, method, data, onStart, onSuccess, onError } =
            action.payload;

        if (onStart) dispatch({ type: onStart });

        next(action);

        try {
            const response = await axios.request({
                baseURL: "https://jsonplaceholder.typicode.com",
                url,
                method,
                data,
            });
            // General
            dispatch(actions.apiCallSucess(response.data));
            // Specific
            if (onSuccess)
                dispatch({ type: onSuccess, payload: response.data });
        } catch (error) {
            // General
            dispatch(actions.apiCallFailed(error.message));
            // Specific
            if (onError) dispatch({ type: onError, payload: error.message });
        }
    };

export default api;

Redux에는 이미 Redux "Thunk"미들웨어라는 비동기 미들웨어 기능이 있습니다. 썽크 미들웨어를 사용하면 dispatch 및 getState를 인수로 가져오는 함수를 작성할 수 있습니다. 이해를 돕기 위해 documentation 을 읽으십시오.

게시물에 대한 작업 및 감속기 만들기
src/store/posts.js

import { createSlice } from "@reduxjs/toolkit";
import { apiCallBegan } from "./api";

const slice = createSlice({
    name: "posts",
    initialState: {
        list: [],
        loading: false,
    },

    reducers: {
        postsRequested: (posts, action) => {
            posts.loading = true;
        },

        postsReceived: (posts, action) => {
            posts.list = action.payload;
            posts.loading = false;
        },

        postsRequestFailed: (posts, action) => {
            posts.loading = false;
        },
    },
});

export default slice.reducer;

const { postsRequested, postsReceived, postsRequestFailed } = slice.actions;

const url = "/posts";

export const loadposts = () => (dispatch) => {
    return dispatch(
        apiCallBegan({
            url,
            onStart: postsRequested.type,
            onSuccess: postsReceived.type,
            onError: postsRequestFailed.type,
        })
    );
};

상점 구성

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import reducer from "./posts";
import api from "./middleware/api";

export default function store() {
    return configureStore({
        reducer,
        middleware: [...getDefaultMiddleware(), api],
    });
}

포스트 컴포넌트
src/components/posts.js

import { useDispatch, useSelector } from "react-redux";
import { loadposts } from "../store/posts";
import { useEffect } from "react";

const Posts = () => {
    const dispatch = useDispatch();
    const posts = useSelector((state) => state.list);

    useEffect(() => {
        dispatch(loadposts());
    }, [dispatch]);

    return (
        <div>
            <h1>Posts</h1>
            <ul>
                {posts.map((post) => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default Posts;

App.js

import { Provider } from "react-redux";
import configureStore from "./store/configureStore";
import Posts from "./components/posts";
import "./App.css";

const store = configureStore();

const App = () => {
    return (
        <Provider store={store}>
            <Posts />
        </Provider>
    );
};

export default App;

그게 다야, 로컬 서버에서 프로젝트를 실행하십시오. API가 작동하는지 확인하십시오. 실수를 발견했거나 코드를 개선했다면 알려주세요. 나는 당신이 무언가를 배웠기를 바랍니다.

이 게시물이 마음에 든다면 제 유튜브 채널에서 저를 응원해주세요. 저에게 많은 영감을 줍니다.

감사합니다...