React+Redux는 웹 프로젝트 클라이언트의 광범위한 사용과 유행을 개발하는 기술입니다.이러한 번들은 기능 개발을 간소화함으로써 제품의 기능을 확장할 수 있다.물론 완벽하지는 않다. 이런 기술도 예외가 아니다.본고에서 React+Redux를 사용할 때 도전을 피하는 방법과 Redux Thunk를 사용하여 개발 과정을 간소화할 수 있는 이유를 보여 드리겠습니다.
JavaScript는 비동기식 이벤트 루프가 있는 언어입니다.이것은 모든 논리가 한 라인에서 실행된다는 것을 의미하지만, 기본적으로 실행 가능한 코드의 시퀀스를 정의하지 않습니다.예:

fetch('https://jsonplaceholder.typicode.com/todos/2').then((resp) => {
   console.log('data is fetched ');
});
console.log('Next statement after fetch');

위의 코드를 실행하면 다음과 같은 작업이 수행됩니다.

데이터 요청

메시지 출력 "추출된 다음 문장"

데이터 추출

메시지 출력'추출된 데이터'

이전에 비동기 프로그래밍을 처리한 적이 없는 사람들에게는 이런 동작 흐름이 이상하게 보일 수 있다. 왜냐하면 메시지'fetch 후의 다음 문장'은 목록의 마지막이고 마지막 라운드에서 실행해야 하기 때문이다.
기본적으로 Redux 스케줄링의 이벤트가 동기화되기 때문에 이런 특성도 장애가 된다.코드의 동기화 실행으로 인해 응용 프로그램에 대량의 API 요청이 필요한 문제가 발생할 수 있습니다.다음 그림은 Redux의 기본 사상을 보여 줍니다.
이것은 특정 논리를 실행하는 선형 순환 흐름이다.클라이언트에서 선형 코드를 실행하는 것과 관련이 있을 때 이런 방법은 작업이 양호하고 안정적이다.그러나 대부분의 경우 클라이언트에서 JavaScript를 사용하려면 네트워크와 협력하여 일부 데이터를 수신하거나 업데이트하는 조회를 해결해야 한다.
모든 요청은 리셋이 있는 비동기 코드입니다.따라서 복잡한 클라이언트 논리를 실현할 때 코드 혼란을 초래하고 많은 잠재적인 오류를 초래할 수 있다.
물론 이것은 우리가 실현하고자 하는 것이 아니다.

솔루션

그렇다면 상술한 상황이 발생했을 때 프로그래머는 어떻게 생활을 간소화할 수 있을까?그들은 구성 요소의 비동기 논리 부분을 조작에 보여줌으로써 이 점을 실현할 수 있다.
이런 방식으로 그림의 블록'작동'은 선형 코드에서 분기와 리셋을 포함할 수 있는 논리 집합으로 바뀌었다.또한 필요하면 다음 작업이나 전체 단계 연결 작업을 호출할 수 있습니다.말을 적게 하고 행동을 많이 해라.우리 직접 예시로 들어가자.

실시

이 솔루션은 중간부품 개념에 기반한 Redux 지원입니다.Redux의 중간부품은 이벤트를 처리하거나 응답할 수 있습니다. 이 이벤트는 이벤트가reducer에 들어가서 상태에 영향을 주기 전에 스케줄링됩니다.

import { applyMiddleware } from "redux";

const store = createStore(
  reducers,
  initialState,
  applyMiddleware(
    middlewareOne,
    middlewareTwo
  )
);

대부분의 경우, 중간부품은 이벤트를 처리하고 다음 중간부품이나reducer에 보여주는 기능입니다.중간부품의 기능은 기능 체인과 유사하고 모든 기능 체인은 동작을 다음 기능에 분배한다.
너는 더 많이 읽을 수 있다here.이 정보들은 아래에 기술한 해결 방안의 요점을 충분히 이해할 수 있다.

Redux Thunk 패키지

이것은 동작 대상이 아닌 반환 함수를 작성할 수 있는 Redux용 중간부품 패키지입니다.또한 내부 함수는 두 개의 매개 변수인dispatch와 getState를 수신합니다.
이것은 동작 작성자 내에서 특정 논리를 실행하고 현재 상태를 분석하며 동작이나 그 중의 일부 동작을 스케줄링할 수 있다.이것은 논리에 달려 있습니다. 선형으로 실행할 수 있을 뿐만 아니라 일부 네트워크 요청을 리셋할 때도 실행할 수 있습니다.
그것은 프로젝트 논리를 구축하는 데 매우 큰 유연성을 제공했다.다음은 실천 중의 효과를 볼 수 있다

Redux에서

const action = (payload) => {
    return ({
        type: ‘some_action_type’,
        payload,
    });
};

dispatch(actionCreatorFn(payload));

중간부품reduxthunk 사용하기

const actionCreatorFn = (payload) => (dispatch, getState)  => {
    // some internal logic
    dispatch({
        type: ‘some_action_type’,
        payload,
    });

    // some other internal logic
    if (condition)  {
        dispatch({ type: ‘other_action’ });
    } else {
        dispatch({ type: ‘third_action’ });
    }
};

dispatch(actionCreatorFn(payload));

이런 방식을 통해 여러 개의 스케줄링된 동작을 가진 동작 창설자 내부에 논리를 세울 수 있다.그 밖에 일부 데이터가 요청한 리셋에서 스케줄링을 할 수 있다.컨텐트를 스케줄링하지 않으면 오류가 발생하지 않고 상태가 현재 상태로 유지되며 변경되지 않습니다.
이런 방법의 장점

논리에서 구성 요소 제거

Redux 구성 요소 가져오기 필요 감소(스토리지/

스케줄링) React 또는 응용 프로그램 논리

의 구성 요소로 이동

비동기식 코드 단순화

프로젝트를 더욱 간단하고 이해하기 쉽게

프로젝트 초기화 중 중간부품 연결

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

이제 우리는 위에서 설명한 기능을 사용할 수 있는 실제 사례를 상상해 봅시다.예를 들어 다음과 같은 구조의 요청 체인으로 구성된 데이터 업로드가 될 수 있다. 위쪽은 요청 체인이고 그 중에서 이전 요청의 데이터는 다음 요청을 실행하는 매개 변수로 사용된다.또한 요청을 실행한 후에 하나의 요청을 실행하는 것이 아니라 몇 개의 요청을 실행하는 지점이 발생할 수 있습니다.

const initCurrentUser = () => (dispatch, getState) => {
 fetch('/user').then((response) => {
   const { currentUserId } = response;
   dispatch({
     type: 'set_current_user_id',
     payload: { currentUserId },
   });
   dispatch(getUserExtendedInfo(currentUserId));
   dispatch(getUserContactsList(currentUserId));
   dispatch(getUserInboxMessages(currentUserId));
 });
};

const getUserContactsList = (userId) => (dispatch, getState) => {
 fetch(`/user/${userId}/contacts`).then((response) => {
   const { contactsList } = response;
   dispatch({
     type: 'set_user_contacts',
     payload: { 
       userId,
       contactsList,
     },
   });
 });
};

const getUserInboxMessages = (userId) => (dispatch, getState) => {
 fetch(`/user/${userId}/inbox`).then((response) => {
   const { inbox } = response;
   dispatch({
     type: 'set_user_inbox',
     payload: {
       userId,
       inbox,
     },
   });
 });
};

const getUserExtendedInfo = (userId) => (dispatch, getState) => {
 fetch(`/user/${userId}/info`).then((response) => {
   const { userInfo } = response;
   dispatch({
     type: 'set_user_info',
     payload: {
       userId,
       userInfo,
     },
   });
   dispatch(getArticleDetails(userInfo.lastArticleId));
 });
};

const getArticleDetails = (articleId) => (dispatch, gestState) => {
 fetch(`/article/${articleId}`).then((response) => {
   const { articleDetails } = response;
   dispatch({
     type: 'set_article_details',
     payload: {
       articleId,
       articleDetails,
     },
   });
   dispatch(getAuthorDetails(articleDetails.authorId));
 });

};

const getAuthorDetails = (authorId) => (dispatch, getState) => {
 fetch(`/author/${authorId}/details`).then((response) => {
   const { authorDetails } = response;
   dispatch({
     type: 'set_author_details',
     payload: {
       authorId,
       authorDetails,
     },
   });
 });
};

dispatch(initCurrentUser());

이 코드는 등급 연결 데이터 업로드를 설명합니다 (위 그림 참조).여기에서actioncreator에서 다음 actioncreator를 분배할 기회를 보거나 상태에 영향을 줄 동작을 분배할 수 있으며, 리셋에서 단독으로 동작 분배를 수행할 수 있습니다.상술한 기술은 개발을 현저하게 간소화할 수 있다.
Reduxthunk는 논리에서 구성 요소를 제거하고 비동기 코드를 간소화할 수 있는 중간부품입니다.이런 방법은 강제적이지는 않지만 코드의 복잡도가 성공의 길로 가는 장애가 되는 큰 프로젝트에서 유용하다.