React Redux: 빠른 '내부 기능'

리덕스란?

Redux는 애플리케이션의 상태를 관리하는 데 널리 사용되는 JavaScript 라이브러리입니다. React 애플리케이션의 약 60%가 Redux를 사용하므로 최소한 들어본 적이 있을 것입니다. Redux는 모든 프로젝트 상태를 한 곳에 저장합니다. 이것은 Redux의 주요 사용 사례이며, 해결하는 문제는 데이터 및 상태 전달을 훨씬 덜 골칫거리로 만드는 것입니다. 예를 들어 두 개의 하위 구성 요소가 있는 상위 구성 요소가 있는 경우 이러한 구성 요소는 사용하고 같은 상태를 공유합니다. 일반적으로 이 문제는 들어 올려서 해결할 수 있습니다. 따라서 두 번째 하위 구성 요소에서 App.js 파일로 상태를 들어 올린 다음 해당 최상위 수준에 도달하면 이 상황에서 세 번째 구성 요소의 상태를 사용할 수 있습니다. 이 단방향 흐름은 다양한 구성 요소에서 많은 상태를 사용해야 하는 훨씬 더 크고 복잡한 애플리케이션으로 작업할 때 문제가 됩니다.



Store라는 것이 Redux를 사용하여 모든 상태를 관리하므로 구성 요소는 상태 변경 사항을 저장소로 보내는 데만 집중합니다. 저장소는 "Single Source of Truth"의 훌륭한 예입니다. 상태 변경 사항이 저장되는 위치에 대한 아이디어. 흥미롭게도 Redux는 이러한 불변성 품질을 가지고 있습니다. 이는 우리가 상태 개체와 해당 속성을 자체적으로 변경하지 않고 Redux가 새 개체를 만들고 새 응용 프로그램 상태를 계산하고 새로 생성된 개체로 업데이트한다고 말하는 멋진 방법입니다. 이 모든 문제를 겪는 이유가 궁금할 수 있습니다. 이전 상태는 귀중한 정보라는 점에 유의하는 것이 중요합니다. 카운트 함수를 증분하는 경우 증분 대상이 무엇인지 알아야 합니다. 이전 상태는 유일한 참조 지점입니다.

redux의 상태는 "읽기 전용"이므로 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 발생한 일을 설명하는 객체인 액션을 '방출'하거나 발송하는 것입니다.
저장소 개체 자체에는 기능을 고려할 때 매우 작은 API가 있으며 4개의 메서드만 있습니다.

store.dispatch(액션)

store.subscibe(리스너)

store.getState()

replaceReducer(nextReducer)

상태 설정 방법이 없습니다 ... 확실합니다. 여기에서 파악해야 할 가장 중요한 것은 dispatch() 방법입니다. 이 메서드는 작업으로 알려진 개체를 Redux로 보냅니다. 일반적으로 작업은 상태를 업데이트하는 데 사용할 수 있는 다른 데이터와 함께 "유형"을 전달하는 "페이로드"로 설명할 수 있습니다.

redux를 이해하는 데 중요한 세 번째 주요 개념
Pure Functions로 변경
Redux가 애플리케이션이 직접 상태를 변경하는 것을 허용하지 않는다는 점을 이해하면 대신 파견된 조치가 상태 변경을 "설명"합니다. 리듀서는 내가 의미하는 순수한 함수입니다. 리듀서는 파견된 작업이 무엇이든 처리하고 앱 상태가 어떻게 변경되는지 정의하기 위해 작성하는 함수입니다. 일반적인 데이터 흐름은 다음과 같이 나타낼 수 있습니다.



** React Redux 설정에 대한 간략한 개요 **

설치

//create new react app
$ npm install -g create-react-app
$ create-react-app < APP-NAME >

//(optional) install Yarn
$ npm install --global yarn

//install redux  
$ npm install redux
$ npm install react-redux

먼저 상점을 만들 수 있습니다.

import { createStore } from 'redux'
createStore(reducer, [preloadedState], [enhancer])

상점에 어떻게 액세스합니까? Provider라는 것이 앱을 래핑할 것입니다.

import { Provider } from 'react-redux'
  <Provider store={store}>
  </Provider>,
)

해당 액세스 허용 ** {connect} **를 가져와야 하므로 구성 요소를 내보낼 때 connect로 내보냅니다.

import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);

마지막 큰 것 ** mapStatetoProps ** 또는 ** mapDispatchToProps **
예를 들어 팬더를 사용할 수 있습니다.

const mapStateToProps = (state) => ({ pandas: state.pandas })

const mapDispatchToProps = (dispatch) => {
  return {
    createPanda: (panda) => dispatch({ type: 'CREATE_PANDA', character }),
  }
}

위에서 살펴본 내용을 감안할 때 상점에 정보를 가져오는 데 필요한 방법과 그에 따른 단계를 예로 들었습니다. Redux에 대해 듣게 될 '단점' 중 일부는 Redux를 사용하려는 작업을 시작하기 위해 심각한 양의 상용구 코드가 필요하다는 것입니다. 앱이 redux가 제공하는 기능을 최대한 활용할 수 있을 만큼 강력하다고 생각한다면 Redux를 사용하는 것이 좋습니다.