如何在React中使用Redux的Provider

Question

我一直在关注ReduxJS文档:http://redux.js.org/docs/basics/UsageWithReact.html

在文档的最后,它提到了提供者对象的使用,我已经将我的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);
  }
}

Answer 2

谢谢你的答案,但它缺少一个关键位,实际上是在文档中.

如果未定义contextTypes,则上下文将是空对象.

所以我必须添加以下内容才能为我工作:

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