javascript-如何在R中使用Redux的提供程序

我一直在这里关注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')
)

但是,这就是文档的结尾。 如何在组件内提取提供商提供的商店?

Jacob Mason asked 2020-01-21T21:32:20Z
2个解决方案
56 votes

通过组件访问商店的最佳方法是使用this.context函数,如文档中所述。 这使您可以将状态和动作创建者映射到您的组件,并在商店更新时自动将它们传递给您。 此外,默认情况下,它将以this.props.dispatch的形式传入Provider。这是文档中的示例:

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

请注意,this.context实际上创建了一个新组件,该新组件包裹了您现有的组件! 这种模式称为高阶组件,通常是在React中扩展组件功能的首选方式(优于继承或混合)。

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

class MyComponent {
  someMethod() {
    doSomethingWith(this.context.store);
  }
}
Joe Clay answered 2020-01-21T21:32:51Z
16 votes

感谢您的回答,但是它缺少关键的一点,实际上是在文档中。

如果未定义contextTypes,则context将为空对象。

因此,我必须添加以下内容才能使其适用于我:

  static contextTypes = {
    store: PropTypes.object.isRequired
  }
amahfouz answered 2020-01-21T21:33:20Z
translate from https://stackoverflow.com:/questions/35864957/how-to-use-reduxs-provider-with-react