Redux 미들웨어 의 실천 에 대하 여 말씀 드 리 겠 습 니 다.

최근 프로젝트 전단 개발 프레임 워 크 는 React+Redux 로 이 루어 졌 습 니 다.하지만 서버 엔 드 에 어떻게 비동기 적 으로 접근 하 는 지,개발 과정 에서 상태 트 리 로그 의 출력 을 하려 면 어떻게 해 야 이 두 가지 문 제 를 해결 할 수 있 습 니까?Redux 미들웨어 사용
미들웨어 를 왜 사용 합 니까?
Redux 를 이용 하여 상태 관 리 를 할 때 사용자 가 UI 차원 에서 행동 을 촉발 합 니 다.하나의 action 대상 은 store.dispatch 를 통 해 Reducer 에 보 내 서 촉발 합 니 다.그 다음 에 Reducer 는 type 에 따라 해당 하 는 Store 의 상태 트 리 를 업데이트 하고 변 경 된 state 는 해당 구성 요소 의 새로운 렌 더 링 을 촉발 합 니 다.아래 그림 과 같다.이 프로 세 스에 서 action 대상 은 동기 화 대상 으로 type 필드 를 포함 하 는 간단 한 대상 입 니 다.그러나 서버 를 방문 할 때 브 라 우 저 는 단일 라인 이기 때문에 서버 가 돌아 오 기 를 기다 리 는 구성 요소 가 한 번 에 나타 나 지 않 기 때문에 서버 와 의 정상 적 인 통신 을 실현 하기 위해 비동기 접근 방법 을 설계 해 야 합 니 다.

중간 부품 소개
Redux 구조 에서 하나의 action 대상 은 store.dispatch 를 통 해 발송 되 고 reducer 함 수 를 호출 하기 전에 중간 부분 을 거 칩 니 다.다음 그림 과 같 습 니 다.

위의 그림 에서 알 수 있 듯 이 하나의 Redux 구조 에서 여러 개의 미들웨어 를 사용 할 수 있 고 이 미들웨어 들 은 요청 한'파이프'를 함께 조직 하여 처리 할 수 있다.하나의 중간 부품 은 하나의 독립 된 함수 로 조합 하여 사용 할 수 있다.중간 부품 은 하나의 통 일 된 인터페이스 가 있다.바로 하나의 중간 부품 이 하나의 특정한 기능 만 완성 할 수 있 기 때문에 여러 개의 중간 부품 을 조합 해야만 비교적 풍부 한 응용 수 요 를 만족 시 킬 수 있다.물론 사용 할 때 도 들 어 오 는 action 을 순서대로 처리 해 야 합 니 다.앞 에 있 는 미들웨어 가 임 무 를 완성 한 후에 야 뒤의 미들웨어 가 action 을 계속 처리 할 수 있 습 니 다.

중간 부품 의 특징
4.567917.중간 부품 은 독립 된 함수 이다.4.567918.
4.567917.중간 부품 을 조합 하여 사용 할 수 있다.4.567918.
4.567917.중간 부품 은 통 일 된 인터페이스 가 있다.
중간 부품 인터페이스
모든 미들웨어 는 하나의 함수 로 정의 되 어야 합 니 다.next 매개 변 수 를 받 아들 이 는 함 수 를 되 돌려 야 합 니 다.이 next 매개 변 수 를 받 아들 이 는 함 수 는 action 매개 변 수 를 받 아들 이 는 함 수 를 되 돌려 줍 니 다.next 매개 변수 자체 도 함수 입 니 다.미들웨어 가 이 next 함 수 를 호출 하여 Redux 에 게 자신의 처리 작업 이 끝 났 음 을 알 립 니 다.
아무것도 하지 않 는 미들웨어 코드 는 다음 과 같다.

function doNothingMiddleware({dispatch, getState}) {
  return function(next){
   return function(action){
    return next(action);
    }
  }
}

포 함 된 기능 은:
dispatch 를 호출 하여 새로운 action 대상 을 보 냅 니 다

getState 를 호출 하여 현재 Redux Store 의 상 태 를 획득 합 니 다

next 호출 은 Redux 에 게 현재 미들웨어 작업 이 완료 되 었 음 을 알려 주 고 Redux 에 게 다음 미들웨어 를 호출 하 라 고 합 니 다

action 대상 action 의 모든 데 이 터 를 방문 합 니 다Redux 애플 리 케 이 션 에서 미들웨어 를 사용 하려 면 애플 리 케 이 션 Middleware 를 통 해 생 성 해 야 합 니 다.Redux 의 소스 파일 은 매우 간단 합 니 다.다섯 개의 파일 로 구성 되 는데 그것 이 바로 createStore.js,apply Middlware.js,copose.js,bindAction Creator.js,combineReducers.js 입 니 다.createStore 와 는 상태 트 리 를 만 들 고 dispatch,subscribe,getState,replace Reducer 와$$observable 을 포함 하여 몇 가지 방법 을 드 러 냅 니 다.createStore 에 들 어 오 는 매개 변 수 는 reducer,preloadedState 와 enhancer 가 있 습 니 다.그 중에서 enhancer 는 store 증강 기 이 고 함수 입 니 다.apply Middleware 로 만 생 성 할 수 있 습 니 다.apply Middleware 함 수 는 외부 함수(미들웨어 함수)에 따라 원래 의 dispatch 함 수 를 포장 한 다음 에 새로운 dispatch 함 수 를 노출 합 니 다.

//      （     ）     dispatch  ，     dispatch       
export default function applyMiddleware(...middlewares) {
 //return    ，     createStore      ，    store dispatch         
 return createStore => (...args) => {//agrs  reducer, preloadedState, enhancer
  const store = createStore(...args)
  let dispatch = () => {
   throw new Error(
    `Dispatching while constructing your middleware is not allowed. ` +
     `Other middleware would not be applied to this dispatch.`
   )
  }

  //           
  const middlewareAPI = {
   getState: store.getState,
   dispatch: (...args) => dispatch(...args)
  }
  //  middlewareAPI            ，         
  const chain = middlewares.map(middleware => middleware(middlewareAPI))
  //     compose  
  dispatch = compose(...chain)(store.dispatch)

  return {
   ...store,
   dispatch
  }
 }
}

중간 부품 과 증강 기의 차이
미들웨어 와 인 텐 시파 이 어 는 모두 Redux Store 에 대한 강화 이지 만 미들웨어 는 Redux Store 의 dispatch 방법 만 강화 했다.즉,dispatch 함수 에서 action 대상 으로 호출 되 어 reducer 에 의 해 처리 되 는 과정 에서 의 조작 이다.인 텐 시파 이 어 는 Redux Store 에 대해 더욱 깊 은 차원 의 강화 맞 춤 형 제작 을 하 는 것 이다.Store Enhancer 를 사용 하고 인 텐 시파 이 어 인 터 페 이 스 를 읽 어야 한다.하나의 증강 기 는 주어진 매개 변 수 를 이용 하여 store 대상 을 만 든 다음 에 대상 을 맞 추고 마지막 으로 Store 대상 을 되 돌려 줍 니 다.전체적인 대 비 는 다음 과 같다.
4.567917.미들웨어:redux store 의 dispatch 함 수 를 강화 할 수 있 습 니 다.즉,dispatch 함수 에서 action 대상 이 reducer 에 의 해 처리 되 는 과정 에서 의 조작 입 니 다4.567917.증강 기:redux store 에 대해 더욱 깊 은 차원 의 강화 맞 춤 형 제작 을 하면 redux store 의 여러 가지 측면 을 강화 할 수 있다비동기 접근 서버:
비동기 액 션 대상
미들웨어 를 도입 하지 않 았 을 때 사회 관리 서브 시스템 이 개발 할 때 모든 action 은 동기 화 되 었 고 동기 화 된 action 대상 은 type 필드 를 포함 하 는 간단 한 대상 이지 만 우 리 는 비동기 action 대상 을 실현 해 야 한다.함수 이다.action 이 트리거 된 후에 reducer 가 명령 을 받 기 전에 비동기 작업 을 할 수 있다.
저 희 는 redux-thunk 을 도입 하여 비동기 접근 서버 방법 을 실현 합 니 다.서버 에 접근 하 는 action 은 적어도 세 개의 action 유형 과 관련 되 어야 합 니 다.

비동기 작업 이 시 작 된 action 유형 을 나타 낸다

비동기 작업 이 성공 한 action 유형 을 나타 낸다

비동기 작업 이 실 패 했 음 을 나타 내 는 action 유형;

Redux-thunk 소스 코드 분석
Redux-thunk 미들웨어 는 Redux 에서 비동기 작업 을 하 는 해결 방법 중 하나 로 action 대상 이 reducer 함수 로 처리 되 기 전에 비동기 기능 을 삽입 하 는 시기 이 고 코드 는 매우 간단 합 니 다.

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

createThunk Middleware 함 수 는 하나의 함 수 를 되 돌려 줍 니 다.모든 action 대상 을 실제 처리 하 는 함수 입 니 다.먼저 매개 변수 action 의 유형 을 검사 합 니 다.함수 형식 이 라면 이 action 함 수 를 실행 하고 dispatch 와 getState 를 실행 합 니 다.
매개 변수 로 전달 되 지 않 으 면 next 를 호출 하여 다음 미들웨어 로 action 을 계속 처리 합 니 다.
Redux-thunk 의 사용:
우선,redux-thunk 을 설치 하고 node.js 가 설 치 된 명령 창 에서"npm install redux-thunk-save-dev"를 실행 하 며 store.js 에 redux-thunk 을 도입 하고 redux 의 apply Middleware 함수 도 도입 하도록 확보 합 니 다.구체 적 인 실현 코드 는 다음 과 같다.

import {createStore, combineReducers, applyMiddleware} from ‘redux';
import {otherState, dataState} from ‘reducers';
import thunkMiddleware from ‘redux-thunk';
var reducers = combineReducers({
  otherState,
  dataState
});
var store = createStore(reducers, applyMiddleware(thunkMiddleware));
export default store;

redux-thunk 을 성공 적 으로 도입 한 후에 우 리 는 비동기 작업 의 action 대상 을 설계 해 야 한다.예 를 들 어 설비 관리 모듈 에서 설비 정 보 를 성공 적 으로 저장 한 후에 설비 정 보 를 다시 얻 으 려 면 코드 는 다음 과 같다.

function saveInfo(params){
  let url = “/api/device”;
  return function(dispatch, getState){
    dispatch(saveInfoRequest());
    return Http.get(url, {
      params: params
    }).then(res=>{
      if(res && res.type === 0){
        dispatch(saveInfoSuccess ());
        let dataState = getState().dataState;
        let newParams = {
          start: dataState.start,
          limit: dataState.limit,
          searchName: dataState.searchName
        };
        dispatch(getInfo(newParams))
      }
    }).catch(error=>{
       dispatch(saveInfoFailure (error));
    });
  }
}

이 saveDeviceInfo 에서 돌아 오 는 함수 에서 dispatch 는 동기 화 된 action 대상 일 뿐만 아니 라 다른 비동기 action 대상 을 파견 하여 선후 관 계 를 가 진 업무 논 리 를 만족 시 킬 수 있 습 니 다.코드 의 가 독성 은 Promise 로 실현 하 는 코드 보다 더욱 뚜렷 합 니 다.
Redux-logger 사용
개발 단계 에서 우 리 는 redux 데이터 흐름 의 모든 절 차 를 모니터링 해 야 합 니 다.log 출력 이 필요 합 니 다.redux-logger 는 공식 적 으로 추천 하 는 로그 미들웨어 로 사용 하기에 매우 편리 합 니 다.물론 redux-logger 를 적용 하려 면 시스템 에서 redux 를 사용 하여 상태 관 리 를 해 야 합 니 다.그렇지 않 으 면 로그 출력 이 없습니다.
Redux-logger 의 사용 방법 은 두 가지 로 나 눌 수 있 는데 기본 적 인 사용 방법 은 다음 과 같다.

import { applyMiddleware, createStore} from ‘redux';
import logger from ‘reudx-logger'
const store = createStore(
  Reducer,
  applyMiddleware(logger)
)

로그 출력 미들웨어 를 직접 쓸 수도 있 습 니 다.코드 는 다음 과 같 습 니 다.

var logger = store => next => action => {
  console.log('[action]', action)
  console.log(`[action] type:${action.type} payload:${JSON.stringify(action.payload)}`)
  next(action)
  console.log('[store]', store.getState())
  console.log(`[store] ${JSON.stringify(store.getState())}`)
}

총결산
Redux 미들웨어 는 store.dispatch 방법 을 강화 할 수 있 고 여러 미들웨어 는'파이프'를 구성 하여 action 대상 을 순서대로 처리 할 수 있 으 며 순서대로 처리 한 후에 야 reducer 에 의 해 처리 할 수 있 습 니 다.미들웨어 의 응용 장면 이 매우 많 습 니 다.비동기 접근 서버 를 지원 할 수 있 을 뿐만 아니 라 좋 은 미들웨어 플러그 인 도 많 습 니 다.예 를 들 어 react-addons-perf 와 디 버 깅 을 하고 redux-logger 와 상 태 를 기록 할 수 있 으 며 업무 수요 에 따라 스스로 미들웨어 를 작성 할 수 있 습 니 다.응용 이 매우 효과 적 이 고 다른 react 프로젝트 에서 많이 실천 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.