Redux에서 비동기 작업을 위해 미들웨어를 사용하는 이유는 무엇입니까?

Redux에서 비동기 흐름을 위해 미들웨어가 필요한 이유는 무엇인가요?

Redux는 비동기 데이터 흐름을 지정하기 때문에 처음에는 Redux가 비동기 데이터 흐름을 지원하지 않는 것처럼 보일 수 있습니다. "Redux 저장소는 동기식 데이터 흐름만 지원합니다." 그러나 그렇지 않습니다.

주어진 예에서 컨테이너 구성 요소는 확실히 비동기 API를 호출한 후 필요한 작업을 전달할 수 있습니다. 실제로 이 접근 방식은 버튼을 클릭할 때 필드가 업데이트되는 것을 통해 알 수 있듯이 제대로 작동합니다.

그렇다면 이 전략의 문제점은 무엇입니까?

주요 관심사는 수많은 구성 요소가 동일한 작업을 수행할 수 있거나 디바운싱과 같은 기능을 통합하는 것이 바람직할 수 있는 대규모 애플리케이션의 맥락에서 발생합니다. 또한 자동 증가 ID와 같은 작업을 위해 액션 생성자 근처에 로컬 상태를 유지하는 것이 도움이 될 수 있습니다.

유지 관리 관점에서 보면 액션 생성자를 별개의 기능으로 분리하여 문제를 단순화하고 codebase.

Redux Thunk 또는 Redux Promise와 같은 미들웨어는 구문 설탕을 통해 코드 단순화를 제공하지만 반드시 필요한 것은 아닙니다.

미들웨어 없이:

미들웨어 없이 액션 생성자는 아래 그림과 같이 직접 비동기 작업을 수행할 수 있습니다.

function loadData(dispatch, userId) {
  fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// in component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // pass dispatch as argument for async action creator
}

썽크와 함께 미들웨어:

Redux Thunk는 비동기 작업 전달을 위해 더욱 간결한 구문을 제공합니다.

function loadData(userId) {
  return dispatch =>
    fetch(`http://data.com/${userId}`)
      .then(res => res.json())
      .then(
        data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
        err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
      );
}

// in component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch as usual
}

미들웨어의 이점:

주요 Redux Thunk와 같은 미들웨어를 사용하면 액션 생성기 구현 세부 사항에서 구성 요소를 분리할 수 있다는 이점이 있습니다. 구성 요소는 액션 생성자가 동기식인지 비동기식인지, Redux 상태나 다른 액션 생성자와 상호 작용하는지 여부를 인식하지 못합니다.

미들웨어의 대안:

Redux Thunk는 Redux 애플리케이션에서 비동기 요청을 처리하는 유일한 접근 방식은 아닙니다. 또 다른 강력한 대안은 Redux Saga로, 들어오는 작업에 대해 작동하고 추가 작업을 생성하기 전에 요청을 변환하거나 실행하는 장기 실행 "saga"를 정의할 수 있습니다.

위 내용은 Redux에서 비동기 작업을 위해 미들웨어를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!