如何在 React 中使用 Redux 的 Provider答案

【问题标题】：How to use Redux's Provider with React如何在 React 中使用 Redux 的 Provider
【发布时间】：2016-06-22 06:08:09
【问题描述】：

我一直在关注 ReduxJS 文档：Usage with 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')
)

但是，这就是文档结束的地方。如何在组件中提取提供商提供的商店？

【问题讨论】：

它向您展示了如何将组件连接到本教程前面的商店 - 查看标记为“容器组件”的部分。
@JoeClay 所以你还需要使用connect吗？
connect 是最好/最可靠的方法，除非您有充分的理由降低级别（指南提到connect 具有额外的性能优化）。也就是说，如果您真的想直接访问商店，Provider 会这样做，因此所有子组件都可以通过上下文进行操作 - 组件内的 this.context.store 应该返回此实例。
我会写一个格式更好的版本作为答案，并附上一些例子。
@JacobMason 如果不将根组件包装在<Provider> 中，您将无法使用connect()。

标签： javascript reactjs redux

【解决方案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 中扩展组件功能的首选方式（优于继承或 mixins 之类的东西）。

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

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

【讨论】：

哦，伙计，最糟糕的是不知道用谷歌搜索什么。 this.context 是我需要的。 facebook.github.io/react/docs/context.html
@Freedom_Ben：我知道那种感觉！很高兴你找到了你要找的东西。
ownProps.filter 是什么？我在 todo 示例中的 Link comp 中没有看到 filter 道具
@SuperUberDuper: ownProps 指的是包装器组件上的道具，而不是原来的——你可以在这里看到FilterLink（和过滤器道具）的用法：redux.js.org/docs/basics/UsageWithReact.html#componentsfooterjs
Thx，还有为什么在footer.js中导入了React，我没看到用过

【解决方案2】：

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

如果未定义 contextTypes，则 context 将是一个空对象。

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

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

【讨论】：

那个在组件里？那么在渲染函数this.contextTypes.store.getState() 中呢？
是的，这是在组件内部。在您使用的 render() 方法中： this.context.store
哇，我被困了整整一个星期才想弄清楚！