如何使用终极版的供应商与之反应

问题描述：

我一直在关注的ReduxJS文档浏览：http://redux.js.org/docs/basics/UsageWithReact.html 如何使用终极版的供应商与之反应

在文档的最后它提到的提供对象的用法，我都包裹着我的应用程序组件中，像这样的供应商：

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'具有额外的性能优化）。也就是说，如果你真的想直接访问商店，'Provider'使得它所有的子组件都可以通过上下文来实现 - 组件中的'this.context.store'应该返回这个实例。 –

答

通过组件访问您的商店的最佳方式是使用connect()函数as described in the documentation。这允许您将状态和动作创建者映射到您的组件，并在商店更新时自动传入。此外，默认情况下，它将通过dispatch作为this.props.dispatch。下面是从文档的例子：

注意connect实际创建，围绕现有的一个包装了一个新的组件！这种模式被称为Higher-Order Components，并且通常是在React中扩展组件功能的首选方式（通过诸如继承或mixin之类的东西）。

由于有它不少性能优化，一般是不太可能造成的错误，在终极版开发者几乎总是建议使用connect上直接访问商店 - 但是，如果你有一个非常充分的理由需要较低级别的访问权限，该Provider组件使得它如此它所有的孩子都能通过this.context访问存储：

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

哦，男人，不知道谷歌是最糟糕的。 'this.context'是我所需要的。 https://facebook.github.io/react/docs/context.html –

@Freedom_Ben：我知道这种感觉！很高兴你发现你在找什么。 –

ownProps.filter是什么？我没有看到链接组件中的过滤器道具，例如 – SuperUberDuper

答

感谢您的回答，但它缺少一个重要的一点，这实际上是文档。

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

所以我不得不添加以下为它为我工作：

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

那在组件？所以在渲染函数'this.contextTypes.store.getState（）'例如？ – R01010010

是的，这是在组件内部。并在您使用的render（）方法中： this.context.store – amahfouz

如何使用终极版的供应商与之反应

相关推荐