리덕스를 이해하는 방법

　 redux의 원리

　 회사에는 물류(actionType), 전자상거래(actionType), 광고(actionType)의 세 가지 사업이 있습니다. 회사의 금융 시스템(국가)은 세 가지 사업의 수익을 기록합니다. 각각. 어느 날, 전자상거래 업체는 회사의 전자상거래 플랫폼에서 100만 달러 상당의 상품(액션)을 판매했고, 벌어들인 자금은 송장(디스패치) 형식으로 해당 업체의 재무 부서에 전송되었습니다. 얻은 이익(리듀서)은 금융 시스템(상태)에 업데이트됩니다.

　핵심 원칙: 이벤트 액션을 통해 결과는 디스패치를 ​​통해 리듀서로 전송됩니다. 리듀서에서는 다양한 actionType에 따라 데이터에 대해 다양한 비즈니스 프로세스가 수행되고 최종 결과가 상태 트리로 업데이트됩니다.

몇몇 상사들이 회사 자금을 예의주시하고 항상 자금 변동에 주의를 기울여야 하기 때문에, 자금 변동이 있을 때 (청취자)에게 문자로 알려주는 이벤트(구독)를 마련했습니다. 자금.

원리: Redux에는 상태 데이터 변경 이벤트에 대한 외부 구독을 허용하는 내장형 리스너 배열이 있습니다. 상태 트리의 데이터가 변경되면 모든 청취 이벤트가 통보됩니다.

　API 설명

function createStore(reducer, preloadedState, enhancer)

　createStore 메소드에서는 전체 redux 환경이 초기화됩니다. preloadedState는 상태 트리의 초기 값 역할을 합니다. 이 메소드는 redux의 오픈 인터페이스를 반환하며, 반환된 api를 통해서만 redux의 상태를 조작할 수 있습니다.

　createStore는 반환된 api를 반환합니다.

 return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

　store.getState: 현재 redux에서 관리하는 상태 개체를 반환합니다.

　store.subscribe: 이 인터페이스를 통해, 즉 redux 상태가 다음과 같은 경우 구독 이벤트를 등록할 수 있습니다. 액세스됨(상태 데이터가 수정되었는지 여부에 관계없이) redux는 등록된 모든 이벤트를 탐색합니다.

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

　 store.dispatch: 이벤트 액션이 실행된 후 디스패치를 ​​통해 결과를 리듀서에 푸시합니다. 작업의 결과는 일반 js 객체여야 하며, type 속성을 포함해야 합니다. 감속기에서는 데이터를 유형에 따라 다르게 처리한 후 해당 상태로 업데이트할 수 있습니다.

　 감속기 이후에는 데이터 변경 여부에 관계없이 모든 청취 이벤트가 순회됩니다.

function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

　전체 단일 페이지 애플리케이션은 createStore 메소드를 한 번만 호출한 다음 초기화된 객체가 전역적으로 사용 가능한지 확인하면 redux를 통해 데이터의 통합 관리를 달성할 수 있습니다.

위 내용은 리덕스를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!