javascript - 如何在 React 中使用 Redux 的 Provider

Question

我一直在关注这里的 ReduxJS 文档:Usage with React

文档末尾提到了 provider 对象的用法，我已经将我的 App 组件包装在 provider 中，如下所示:

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')
)

然而，这就是文档的结尾。如何在组件中取货商提供的商店？

Answer 1

通过组件访问商店的最佳方式是使用 connect() 函数，as described in the documentation .这允许您将状态和 Action 创建者映射到您的组件，并让它们在您的商店更新时自动传递。此外，默认情况下它会将 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 实际上会创建一个新组件来包裹您现有的组件!此模式称为 Higher-Order Components ，并且通常是在 React 中扩展组件功能的首选方式(优于继承或混入之类的东西)。

由于它有很多性能优化并且通常不太可能导致错误，Redux 开发人员几乎总是建议使用 connect 直接访问商店 - 但是，如果你有 非常需要较低级别访问的充分理由，Provider 组件使它的所有子级都可以通过 this.context 访问商店:

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