Javascript 如何使用Redux'；具有React的s提供程序

我一直在关注ReduxJS文档：

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

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')
)

从“React”导入React
从“react dom”导入react dom
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“./app/reducers”导入RootReducer
从“./App/App”导入应用程序
const store=createStore（RootReducer）
ReactDOM.render(
,
document.getElementById（'root'））
)

---

然而，这就是文档的结尾。如何在组件中提取提供商提供的存储？

通过组件访问存储的最佳方法是使用

connect（）

函数。这允许您将状态和操作创建者映射到组件，并在存储更新时自动传递它们。此外，默认情况下，它将作为

this.props.dispatch

传入

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，通常是在React中扩展组件功能的首选方式（通过继承或混合等方式）

由于它有相当多的性能优化，并且通常不太可能导致错误，Redux开发人员几乎总是建议使用

connect

直接访问存储-但是，如果您有很好的理由需要较低级别的访问，

Provider

组件使其所有子项都可以通过以下方式访问存储：

---

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

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

因此，我必须添加以下内容才能使其对我起作用：

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

---

它向您展示了如何将组件连接到教程前面的存储区-请查看标记为“容器组件”的部分。@JoeClay因此您仍然需要使用connect？

connect

是最好/最可靠的方法，除非您有很好的理由降低级别（指南提到，

connect

具有额外的性能优化）。也就是说，如果您真的想直接访问存储，

提供程序

使所有子组件都可以通过上下文来访问-

this.context。组件中的存储

应返回此实例。我将编写一个格式更好的版本，并提供一些示例作为答案。@jacobson您不能使用

连接()

而不将根组件包装在

中。哦，天哪，不知道搜索什么是最糟糕的。

这就是我需要的。@Freedom\u Ben:我知道这种感觉！很高兴你找到了你要找的东西。ownProps.filter是什么？我在todo的链接comp中没有看到filter propexample@SuperUberDuper: 
ownProps
指的是包装器组件上的道具，而不是原来的道具-你可以在这里看到FilterLink（和filter道具）的用法：Thx，还有为什么React被导入footer.js，我看不到它在组件中被使用？所以在呈现函数
this.contextTypes.store.getState（）中
例如？是的，这是在组件中。在您使用的render（）方法中：this.context.storeWow，我花了整整一周的时间试图解决这个问题！
  static contextTypes = {
    store: PropTypes.object.isRequired
  }