redux 비동기 작업에 대한 자세한 소개(코드 예)-JS 튜토리얼-php.cn

redux 비동기 작업에 대한 자세한 소개(코드 예)

不言

풀어 주다： 2018-11-20 14:38:34

앞으로

2271명이 탐색했습니다.

이 글은 redux 비동기 작업에 대한 자세한 소개(코드 예제)를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. Redux 기본

redux

디스패치(액션)를 통한 상태 관리 -> 미들웨어 -> 스토어 변경 -> 스토어 변경 사항 수신 및 뷰 업데이트
# 🎜 🎜#

react-redux

데이터 관리를 담당하는 컨테이너 컴포넌트 및 비즈니스 로직은 책임이 없습니다. UI 프레젠테이션 UI 구성 요소는 this.state가 사용되지 않음을 의미합니다.
Container 구성 요소는 각각 연결됩니다. 저장소가 변경되면 연결이 호출됩니다. connect는 mapStateToProps, mapDispatchToProps
mapStateToProps, 상태를 UI 구성 요소의 소품에 매핑
mapDispatchToProps, 디스패치 메서드를 UI의 소품에 매핑합니다. 구성 요소
공급자 구성 요소, 콘텐츠 API를 사용하여 최상위 수준에서 저장소 시작 연결에서 사용하기 위해 구성 요소의 각 레이어에 전달됨

2. 비동기 처리를 위한 Redux 미들웨어# 🎜🎜#

redux-thunk#🎜 🎜#

redux-thunk 미들웨어는 작업이 메서드가 되도록 허용합니다

작업을 받은 후 미들웨어는 다음을 실행합니다. 작업 메서드를 작성하고 결과를 리듀서에 제공작업이 혼란스럽고 유지 관리가 어렵습니다# 🎜🎜#redux-saga

saga가 작업을 듣고 Effects 작업을 수행합니다. 이 작업을 기반으로
Effects는 차단, 비차단 호출, 취소, 대기, 경주 및 기타 작업을 포함한 유연한 API를 제공합니다# 🎜🎜#비동기 작업을 분리 및 수행하기 편리하고 테스트하기 쉽습니다
# 🎜🎜#3.redux-request-async-middleware

Redux 문서로 시작하기 비동기 작업에 관해 말하면 각 인터페이스 호출에는 다음과 같은 세 가지 동기 작업을 전달해야 합니다.
리듀서에게 요청 시작을 알리는 액션입니다. 이런 종류의 작업을 위해 리듀서는 상태에서 isFetching 태그를 전환할 수 있습니다. 이는 로딩 인터페이스를 표시하도록 UI에 지시합니다.

요청이 성공했음을 리듀서에 알리는 작업입니다. 이런 종류의 작업을 위해 리듀서는 수신된 새 데이터를 상태에 병합하고 isFetching을 재설정할 수 있습니다. UI는 로딩 인터페이스를 숨기고 수신된 데이터를 표시합니다.

요청이 실패했음을 리듀서에 알리는 작업입니다. 이러한 종류의 작업에 대해 감속기는 isFetching을 재설정할 수 있습니다. 또한 일부 감속기는 이러한 실패 정보를 저장하고 UI에 표시합니다. 즉, 인터페이스는 다음과 같이 시작됩니다

dispatch(fetchPostsRequest(subject));
fetch(url).then(res => {
  dispatch(fetchPostsSuccess(subject, res));
}).catch(e => {
  dispatch(fetchPostsFailure(subject, e));
})

로그인 후 복사

이 작업을 미들웨어에 캡슐화하면 됩니다.

#🎜 🎜# 모든 비동기 요청은 이 세 가지 작업을 공유합니다

주제를 사용하여 어떤 요청인지 구별

#🎜🎜 #모든 결과 입력 store.requests

Middleware 소스 코드

export const reduxRequest = store => next => action => {
  let result = next(action);
  let { type, subject, model } = action;
  let _next = action.next;
  if(type === FETCH_POSTS_REQUEST) {
    model().then(response => {
      _next && _next(response);
      store.dispatch(fetchPostsSuccess(subject, response));
    }).catch(error => {
      console.error(error);
      store.dispatch(fetchPostsFailure(subject, error));
    });
  }
  return result
};/

로그인 후 복사

및 redux -Thunk에 메서드를 넣습니다. action

미들웨어가 FETCH_POSTS_REQUEST 작업을 가로채서 비동기 처리를 수행합니다.

#🎜 🎜#reducer 소스 코드

export const requests = (state = {}, action) => {
  switch (action.type) {
    case FETCH_POSTS_REQUEST:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: true,
            state: 'loading',
            subject: action.subject,
            response: null,
            error: null,
          }
        }
      );
    case FETCH_POSTS_FAILURE:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'error',
            subject: action.subject,
            response: state[action.subject].response,
            error: action.error,
          }
        }
      );
    case FETCH_POSTS_SUCCESS:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'success',
            subject: action.subject,
            response: action.response,
          }
        }
      );
    case FETCH_POSTS_CLEAR:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'cleared',
            subject: null,
            response: null,
            error: null,
          }
        }
      )
      return state;
  }
}

로그인 후 복사

결과를 제목에 해당하는 응답에 넣습니다. 틀리면 오류 메시지를 error
#🎜🎜 #isFetching은 현재 요청 상태를 나타냅니다

또한 현재 상태 상태 및 제목 정보도 추가됩니다

# 🎜🎜##🎜 🎜#요청 캡슐화

const request = (subject, model, next) => {
  _dispatch(fetchPostsRequest(subject, model, next));
  return true;
};

로그인 후 복사

FETCH_POSTS_REQUEST 작업을 시작하는 메서드 작성

#🎜 🎜 #즉, 요청을 작성할 때 더 이상 작업에 대해 걱정할 필요가 없습니다. 요청 메서드를 직접 호출하기만 하면 됩니다

결과 캡슐화

const getResponse = state =>
  state
  && state.response !== null
  && state.response;
 
const getLoading = (states = []) =>
  states.reduce((pre, cur) =>
    pre || (cur && cur.isFetching)
    , false)
  || false;

로그인 후 복사

#🎜🎜 ## 🎜🎜#

여러 요청의 결과와 로드 상태를 얻을 수 있습니다

은 redux를 사용하여 상태 관리를 수행하며, 비동기 작업의 복잡성을 최소화하기 위해 복잡한 redux 논리 세트를 작성할 필요가 없습니다. 🎜#