집 > 기사 > 웹 프론트엔드 > React와 Redux에서 React-redux 연결 정보(자세한 튜토리얼)

React와 Redux에서 React-redux 연결 정보(자세한 튜토리얼)

亚连원래의: 2018-06-22 17:39:581064검색

이 글은 주로 React와 Redux의 연결고리인 React-redux를 소개하고 있습니다. 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 에디터를 따라가서 살펴볼까요

저는 이전에도 React 관련 것들을 살펴봤고, SPA 프로젝트도 준비 중이어서 Redux를 해볼 준비가 되어있습니다. Redux 자체는 React와 관련이 없습니다. App State 관리에 사용되는 일반적인 Javscript App 모듈입니다. React 프로젝트에서 Redux를 사용하는 더 좋은 방법은 React-redux 라이브러리를 사용하여 연결하는 것입니다. 이는 React-redux가 없으면 이 두 라이브러리가 함께 사용되지 않고 더 많은 캡슐화를 제공한다는 것을 의미합니다. 과학적인 코드 정리 방법을 통해 React 코드에서 Redux를 보다 편안하게 사용할 수 있습니다.

이전에는 Redux 문서를 통해서만 React-redux에 대해 배웠습니다. 한동안 연습한 후에 소스 코드를 살펴보고 관련 요약을 만들어 보겠습니다. 내가 보고 있는 코드의 npm 버전은 v4.0.0입니다. 이는 사용된 React 버전이 0.14.x임을 의미합니다.

react-redux는 Provider와 Connect라는 두 가지 핵심 모듈을 제공합니다.

Provider

이 모듈은 전체 앱의 컨테이너로 사용됩니다. 원래 앱 컨테이너를 기반으로 하는 추가 레이어입니다. 해당 작업은 Redux 저장소를 소품으로 받아들이고 추가하는 것입니다. context의 속성 중 하나로 선언된 하위 구성 요소는 contextType을 선언한 후 this.context.store를 통해 편리하게 저장소에 액세스할 수 있습니다. 그러나 우리의 컴포넌트는 일반적으로 이를 수행할 필요가 없습니다. 저장소는 다음 연결을 위한 컨텍스트에 배치됩니다.

Provider 사용 예:

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)

// render
ReactDOM.render(
 root,
 document.getElementById(&#39;root&#39;)
)

connect

이 모듈은 Redux와 React 간의 실제 연결이며 이름도 connect라고 합니다.

먼저 Redux의 작동 방식을 고려하세요. 먼저 저장소에서 상태가 유지되고 작업을 전달한 다음 리듀서가 이 작업을 기반으로 상태를 업데이트합니다.

React 애플리케이션에 매핑된 스토어에서 유지되는 상태는 앱 상태입니다. React 구성 요소는 뷰 레이어 역할을 하며 사용자 작업에 대한 렌더링 및 응답이라는 두 가지 작업을 수행합니다. 따라서 연결은 저장소에 있는 필요한 데이터를 렌더링을 위해 React 구성 요소에 소품으로 전달하고, 사용자 작업에 대한 응답으로 작업을 전달하기 위해 작업 생성자를 래핑하는 것입니다.

자, 연결 모듈이 하는 일을 자세히 살펴보겠습니다. API는 다음과 같습니다.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps는 함수이고 반환 값은 props에 병합되어야 하는 상태를 나타냅니다. 기본값은 () => ({})이며, 이는 아무것도 전달되지 않음을 의미합니다.

(state, props) => ({ }) // 通常会省略第二个参数

mapDispatchToProps는 함수일 수 있습니다. 반환 값은 prop만 병합해야 하는 actionCreator를 나타냅니다. 여기서 actionCreator는 디스패치로 패키지되어야 합니다.

(dispatch, props) => ({ // 通常会省略第二个参数
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

더 편리한 점은 이때 객체를 직접 받아들일 수 있다는 점입니다. 이 기능은 위의 예와 완전히 동일합니다.

mergeProps는 병합 프로세스를 사용자 정의하는 데 사용됩니다. 다음은 기본 프로세스입니다. parentProps의 값은 구성 요소 자체의 props입니다. 구성 요소의 props에 동일한 이름이 나타나면 덮어쓰게 됩니다. .

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

옵션에는 두 개의 스위치가 있습니다. pure는 최적화를 켤지 여부를 나타내며, 자세한 내용은 아래에 언급됩니다. 기본값은 true이고, withRef는 내부에 패키지된 구성 요소에 대한 참조를 제공하는 데 사용되며, 이 참조는 getWrappedInstance 메서드를 통해 얻을 수 있습니다. 기본값은 거짓입니다.

connect는 React 구성 요소의 생성자를 연결 객체로 받아들이고 마지막으로 연결된 구성 요소 생성자를 반환하는 함수를 반환합니다.

그럼 몇 가지 질문:

React 구성 요소는 저장소 변경에 어떻게 반응합니까?
Connect가 전체 상태를 직접 전달하는 대신 일부 props를 선택적으로 병합하는 이유는 무엇입니까?
퓨어 최적화는 무엇인가요?

Connect Connector가 반환한 함수를 호출합니다. 이는 Connect라는 내부 구성 요소를 반환하며, 이를 사용하기 위해 Redux 저장소의 변경 사항도 내부적으로 모니터링합니다. 스토어 변경 사항에 응답할 수 있습니다:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}

handleChange () {
 this.setState({
  storeState: this.store.getState()
 })
}

그러나 일반적으로 우리가 연결하는 것은 모든 앱 상태를 전달하지 않는 컨테이너 구성 요소입니다. 그러나 우리 핸들러는 모든 상태 변경에 응답하므로 최적화해야 할 것은 다음과 같습니다. 해당 React 구성 요소는 우리가 실제로 의존하는 상태 부분이 변경될 때만 다시 렌더링됩니다. 그렇다면 우리가 실제로 의존하는 부분은 무엇입니까? 이는 mapStateToProps 및 mapDispatchToProps를 통해 획득됩니다.

구체적인 최적화 방법은 shouldComponentUpdate를 확인하는 것입니다. 컴포넌트 자체 props가 변경되거나, mapStateToProps의 결과가 변경되거나, mapDispatchToProps의 결과가 변경되는 경우에만 shouldComponentUpdate가 true를 반환하는 경우 확인하는 방법은shallowEqual을 비교하는 것입니다.

특정 리듀서의 경우:

export default (state = {}, action) => {
 return { ...state } // 返回的是一个新的对象，可能会使组件reRender
 // return state // 可能不会使得组件reRender
}

또한 연결할 때 불필요한 성능 손실을 피하기 위해 실제로 필요한 상태 또는 actionCreators를 props에 매핑하도록 주의하세요.

마지막으로 connect API에 따르면 ES7 데코레이터 기능을 사용하여 React ES6의 작성 방법과 일치할 수 있음을 발견했습니다.

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)
 })
)
export default class Main extends Component {

}

위 내용은 모든 사람을 위해 제가 정리한 내용입니다. 미래.

React와 Redux에서 React-redux 연결 정보(자세한 튜토리얼)

관련 기사