如何在 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。这允许您将状态和动作创建者映射到您的组件，并让它们在您的商店更新时自动传递。此外，默认情况下它会将 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);
  }
}

Answer 2

感谢您的回答，但它缺少一个关键位，实际上在文档中。

If contextTypes is not defined, then context will be an empty object.

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

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

如何在 React 中使用 Redux 的 Provider

How to use Redux's Provider with React

javascript

reactjs

redux