React와 함께 Redx의 프로바이더를 사용하는 방법

React와 함께 Redx의 프로바이더를 사용하는 방법

ReduxJs 매뉴얼을 따라가고 있습니다.Resact에서의 사용법

이 문서의 마지막에는 공급자 객체의 사용법이 나와 있습니다.저는 다음과 같이 제 앱 컴포넌트를 프로바이더에 랩했습니다.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import RootReducer from './app/reducers'
import App from './app/app'

const store = createStore(RootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

그러나 여기서 설명서가 종료됩니다.컴포넌트 내에서 프로바이더가 제공하는 스토어를 픽업하려면 어떻게 해야 합니까?

컴포넌트를 통해 스토어에 액세스하는 가장 좋은 방법은connect()기능에 대해서는, 메뉴얼에 기재되어 있습니다.이렇게 하면 상태 및 작업 작성자를 구성요소에 매핑하고 스토어 업데이트 시 자동으로 전달할 수 있습니다.또한 디폴트로는 전달됩니다.dispatch~하듯이this.props.dispatch다음은 문서의 예입니다.

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

주의:connect는 기존 컴포넌트를 감싸는 새로운 컴포넌트를 만듭니다.이 패턴은 고차 컴포넌트라고 불리며 일반적으로 React에서 컴포넌트의 기능을 확장하기 위해 선호되는 방법입니다(상속이나 믹스인 등).

퍼포먼스가 최적화되어 있고 일반적으로 버그를 일으킬 가능성이 낮기 때문에 Redux 개발자는 거의 항상 다음을 사용할 것을 권장합니다.connect스토어에 직접 액세스 할 수 없습니다.단, 낮은 수준의 액세스를 필요로 하는 정당한 이유가 있는 경우에는Provider컴포넌트는 모든 자녀가 다음을 통해 스토어에 액세스할 수 있도록 합니다.

class MyComponent {
  someMethod() {
    doSomethingWith(this.context.store);
  }
}

답변 감사합니다만, 이 문서에는 중요한 부분이 하나 빠져 있습니다.그것은 실제로 설명서에 기재되어 있습니다.

contextTypes가 정의되지 않은 경우 컨텍스트는 빈 객체가 됩니다.

그래서 다음 사항을 추가해야 했습니다.

  static contextTypes = {
    store: PropTypes.object.isRequired
  }

언급URL : https://stackoverflow.com/questions/35864957/how-to-use-reduxs-provider-with-react