React/Redex 아키텍처에서 API 호출을 수행할 위치

React/Redex 아키텍처에서 API 호출을 수행할 위치

API에서 데이터를 검색하여 내 어플리케이션에 전달하려고 한다.그러나 리액션/리벤스를 처음 접하는 경우 어디서 전화를 걸어야 하는지, 어떻게 하면 애플리케이션에 전화를 전달할 수 있는지 궁금하다.나는 표준 폴더 구조(구성요소, 환원기, 용기 등)를 가지고 있지만, 지금 API 호출을 어디에 두어야 할지 잘 모르겠다.

이것을 시작하기 위한 가장 쉬운 방법은 단지 당신의 행동에 그것을 추가하는 것이다. 당신이 해야 할 일은 당신의 상점에 thunk를 추가하는 것이다.

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

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

그런 다음 작업에서 api를 호출하는 함수를 생성하십시오.

export const getData() {
  (dispatch) => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(json => dispatch(resolvedGetData(json)))
  }
}

export const resolvedGetData(data) {
  return {
    type: 'RESOLVED_GET_DATA',
    data
  }
}

"낚시할 사람을 가르쳐라."

이것은 통화의 종류와 상황에 따라 달라진다.

1. 일반적으로 간단한 "gets"의 경우, Nader Dabit이 보여준 것처럼 액션 크리에이터에 배치하면 쉽게 할 수 있다.
2. 사용자가 블록에 배치하도록 선택할 수 있는 부작용 관리 라이브러리가 많이 있다(remensx-sagas, axios 호출, remedx-thunk).

지금은 리듀렉스 사가스를 사용하고 있다.적어도 우리가 비동기/와이에 대해 찬성 또는 반대 결정을 내릴 때까지 그것은 JS의 새로운 버전에서 나올 수 있다.

이게 가장 중요한 부분일지도 몰라!

일반적으로 설명서에서 볼 수 있는 특정 도구 집합과 함께 사용되는 일반적인 "개념"을 고려하십시오. 그리고 향후 이와 같은 작업에 대해 "모범 사례"를 검색하십시오.이것은 당신의 프로젝트에 처음 참여했던 다른 사람들이 당신의 새로운 맞춤형 버전을 배우지 않고 방향을 잡고 단지 뛰어들 수 있도록 도울 것이다.

AJAX 통화와 같은 행동을 "부작용"이라고 하며, 일반적으로 당신의 구성요소, "펑크" 액션 크리에이터 또는 "사가스"와 같은 다른 유사한 Redex 부작용 애드온에 산다.

자세한 내용은 Redex FAQ의 다음 답변을 참조하십시오.

참조URL: https://stackoverflow.com/questions/40250036/where-to-put-api-calls-in-react-redux-architecture