redux-thunk 실제 프로젝트 사례에 대한 자세한 설명

이번에는 redux-thunk 실무 프로젝트 사례에 대해 자세히 설명하겠습니다. redux-thunk 실무 프로젝트 사용 시 주의사항은 무엇인가요?

redux의 핵심 개념은 실제로 매우 간단합니다. 수정해야 하는 상태를 저장소에 저장하고, 발생한 일을 설명하는 작업을 시작하고, 리듀서를 사용하여 작업이 상태 트리를 어떻게 변경하는지 설명합니다. 스토어를 생성할 때 리듀서를 전달해야 합니다. 스토어의 데이터를 실제로 변경할 수 있는 것은 store.dispatch API입니다.

1. 개념

액션을 발송한 후 리듀서에 도달하기 전에 몇 가지 추가 작업을 수행하려면 미들웨어를 사용해야 합니다. 로깅, 충돌 보고서 생성, 비동기 인터페이스 호출 또는 라우팅 등에 Redux 미들웨어를 사용할 수 있습니다.
즉, 미들웨어는 store.dispatch()를 확장한 것입니다

2. 미들웨어 사용법

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

썽크 미들웨어를 직접 도입해서 applyMiddleware 메소드에 넣고, createStore 메소드를 전달하면 끝입니다. store.dispatch()에. 즉, 리듀서에서 일부 비동기 작업을 수행할 수 있습니다.

3.applyMiddleware()

사실 applyMiddleware는 Redux의 기본 메소드로, 모든 미들웨어를 배열로 결합하여 순차적으로 실행합니다.

더 많은 미들웨어가 있다면 하나씩 매개변수로 전달할 수 있습니다

const store = createStore(
  reducers, 
  applyMiddleware(thunk, logger)
);

미들웨어의 진화 과정을 이해하고 싶다면 redux 공식 문서: https://redux.js.org/advanced를 방문하세요. /middleware

4.redux-thunk

redux-thunk 소스 코드 분석 node_modules/redux-thunk/src/index.js

function createThunkMiddleware(extraArgument) {
 return ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
   return action(dispatch, getState, extraArgument);
  }
  return next(action);
 };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

redux-thunk 미들웨어 내보내기 기본값은 createThunkMiddleware()에 의해 전달된 썽크입니다. createThunkMiddleware 함수를 살펴보면 Ke 함수를 반환합니다. 우리가 ES5로 번역한 코드가 더 읽기 쉽습니다.

function createThunkMiddleware(extraArgument) {
  return function({ dispatch, getState }) {
    return function(next){
      return function(action){
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
}

보고 나면 redux-thunk의 가장 중요한 아이디어는 함수를 반환하는 액션 생성자를 받아들일 수 있다는 점을 알 수 있습니다. 액션 생성자가 함수를 반환하면 실행합니다. 그렇지 않으면 원래 next(액션)에 따라 실행합니다.

이 액션 생성자는 함수를 반환할 수 있으므로 이 함수에서 일부 비동기 작업을 수행할 수 있습니다.

예:

export function addCount() {
  return {type: ADD_COUNT}
}
export function addCountAsync() {
  return dispatch => {
    setTimeout( () => {
      dispatch(addCount())
    },2000)
  }
}

addCountAsync 함수는 함수를 반환하고 디스패치를 ​​함수의 첫 번째 매개 변수로 전달하고 함수 내에서 비동기 작업을 수행합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS를 사용하여 지난 7일과 지난 3일의 날짜를 가져오는 방법

프로젝트에서 Angular ng-animate 및 ng-cookies를 사용하는 방법

위 내용은 redux-thunk 실제 프로젝트 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!