redux 비동기 작업에 대한 자세한 소개(코드 예)
- 不言앞으로
- 2018-11-20 14:38:342280검색
이 글은 redux 비동기 작업에 대한 자세한 소개(코드 예제)를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
1. Redux 기본
redux
- # 🎜🎜#
- 디스패치(액션)를 통한 상태 관리 -> 미들웨어 -> 스토어 변경 -> 스토어 변경 사항 수신 및 뷰 업데이트
# 🎜 🎜#
모든 상태를 저장소 객체에 저장 - 리듀서는 순수 함수이며 비동기 작업은 부작용이 포함되어 있어 특별한 처리가 필요합니다
데이터 관리를 담당하는 컨테이너 컴포넌트 및 비즈니스 로직은 책임이 없습니다. UI 프레젠테이션 UI 구성 요소는 this.state가 사용되지 않음을 의미합니다.
Container 구성 요소는 각각 연결됩니다. 저장소가 변경되면 연결이 호출됩니다. connect는 mapStateToProps, mapDispatchToProps
mapStateToProps, 상태를 UI 구성 요소의 소품에 매핑
mapDispatchToProps, 디스패치 메서드를 UI의 소품에 매핑합니다. 구성 요소
공급자 구성 요소, 콘텐츠 API를 사용하여 최상위 수준에서 저장소 시작 연결에서 사용하기 위해 구성 요소의 각 레이어에 전달됨
redux-thunk#🎜 🎜#
redux-thunk 미들웨어는 작업이 메서드가 되도록 허용합니다작업을 받은 후 미들웨어는 다음을 실행합니다. 작업 메서드를 작성하고 결과를 리듀서에 제공작업이 혼란스럽고 유지 관리가 어렵습니다# 🎜🎜#redux-saga
saga가 작업을 듣고 Effects 작업을 수행합니다. 이 작업을 기반으로
Effects는 차단, 비차단 호출, 취소, 대기, 경주 및 기타 작업을 포함한 유연한 API를 제공합니다# 🎜🎜#비동기 작업을 분리 및 수행하기 편리하고 테스트하기 쉽습니다
# 🎜🎜#3.redux-request-async-middleware
Redux 문서로 시작하기 비동기 작업에 관해 말하면 각 인터페이스 호출에는 다음과 같은 세 가지 동기 작업을 전달해야 합니다.
리듀서에게 요청 시작을 알리는 액션입니다. 이런 종류의 작업을 위해 리듀서는 상태에서 isFetching 태그를 전환할 수 있습니다. 이는 로딩 인터페이스를 표시하도록 UI에 지시합니다.
요청이 실패했음을 리듀서에 알리는 작업입니다. 이러한 종류의 작업에 대해 감속기는 isFetching을 재설정할 수 있습니다. 또한 일부 감속기는 이러한 실패 정보를 저장하고 UI에 표시합니다. 즉, 인터페이스는 다음과 같이 시작됩니다
dispatch(fetchPostsRequest(subject));
fetch(url).then(res => {
dispatch(fetchPostsSuccess(subject, res));
}).catch(e => {
dispatch(fetchPostsFailure(subject, e));
}) 이 작업을 미들웨어에 캡슐화하면 됩니다.
#🎜 🎜# 모든 비동기 요청은 이 세 가지 작업을 공유합니다
주제를 사용하여 어떤 요청인지 구별
- 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
};/
#🎜 🎜#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;
};
#🎜 🎜 #즉, 요청을 작성할 때 더 이상 작업에 대해 걱정할 필요가 없습니다. 요청 메서드를 직접 호출하기만 하면 됩니다
결과 캡슐화
const getResponse = state => state && state.response !== null && state.response; const getLoading = (states = []) => states.reduce((pre, cur) => pre || (cur && cur.isFetching) , false) || false;#🎜🎜 ## 🎜🎜#
- 목록과 같은 더 많은 작업이나 형식을 계속해서 캡슐화할 수 있습니다 #🎜 🎜#
- 4. 요약
- 인터페이스는 redux에 의해 처리되고 보기 구성 요소는 내부 구성 요소에 의해 처리됩니다. state, 외부는 비즈니스 레이어와 뷰 레이어를 분리하여 작업을 위한 간단한 인터페이스만 노출합니다
- # 🎜🎜#React 16.3 새로운 콘텐츠 API와 비교하면 redux의 장점은 거짓말 핫삽입 미들웨어와 순수함수 리듀서 작성방법
위 내용은 redux 비동기 작업에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!