如何在React中使用Redux的Provider

Question

我一直在这里关注ReduxJS文档：React的用法

在文档末尾提到了提供程序对象的用法，我将App组件包装在提供程序中，如下所示：

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()功能，如文档中所述。这使您可以将状态和动作创建者映射到您的组件，并在商店更新时自动将它们传递给他们。此外，默认情况下，它将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中扩展组件功能的首选方法（优于继承或mixins之类的东西）。

由于有它不少性能优化，一般是不太可能导致错误的终极版开发者几乎总是建议使用connect在直接访问商店-但是，如果你有一个 非常
充分的理由需要更低级别的访问权限，该Provider组件使得因此所有子公司都可以通过以下方式访问商店this.context：

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