如何使用終極版的供應商與之反應

我一直在關注的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') 
)

但是，這就是文檔結束的地方。如何在組件中提供由提供商提供的商店？

來源

2016-03-08 Jacob Mason

它展示瞭如何將組件連接到在本教程前面的商店 - 看看標有「集裝箱組件」一節。 –

@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); 
    } 
}

來源

2016-03-08 12:14:52

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

@Freedom_Ben：我知道這種感覺！很高興你發現你在找什麼。 –

ownProps.filter是什麼？我沒有看到鏈接組件中的過濾器道具，例如 – SuperUberDuper

感謝您的回答，但它缺少一個重要的一點，這實際上是文檔。

如果未定義contextTypes，則上下文將是空對象。

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

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

來源

2016-12-26 05:17:29 amahfouz

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

是的，這是在組件內部。並在您使用的render（）方法中： this.context.store – amahfouz

如何使用終極版的供應商與之反應

回答

相關問題