React獲取狀態提供者方法

如果我理解正確，提供程序組件/方法允許以redux存儲訪問權限，而不必直接在每個組件內導入它。假設我的理解是正確的，那麼我想知道爲什麼我無法在App.js中獲得store.getState（）。它說，店裏是未定義....React獲取狀態提供者方法

Index.js

const store = createStore(allReducers,{}) 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('root'));

App.Js

class App extends Component { 
    render() { 
    console.log(store.getState()) 
    return (
     <div className="App"> 
     <div className="individual"> 
      <House/> 
      <NameTag/> 
     </div> 

     </div> 
    ); 
    } 
}

來源

2017-06-16 Yoni Messing

您不應該通常嘗試以這種方式訪問商店。

雖然你可以手動編寫代碼訂閱終極版存儲在您反應的組分，但絕對沒有理由自己編寫代碼。由React-Redux的connect函數生成的包裝器組件已經爲您存儲了訂閱邏輯。這些包裝器組件還使用您提供的mapStateToProps函數來提取每個組件從Redux狀態所需的數據。所以，你不會在你自己的組件中調用store.getState()。

此外，connect做了lot的工作，以確保您的實際組件只有在實際需要時才重新渲染。這包括大量的記憶工作，以及來自父組件的道具比較以及該組件的mapStateToProps函數返回的值。通過不使用connect，您將放棄所有這些性能改進，並且您的組件將不必要地重新渲染。第三，如果您手動引用組件中的商店（無論是通過直接導入還是通過上下文），都會將它們直接耦合在一起，從而使組件更難測試。我個人試圖讓我的組件「不知道」Redux。他們從未引用props.dispatch，而是稱之爲預先綁定的動作創建者，如this.props.someFunction()。組件不會「知道」它是一個Redux動作創建器 - 該函數可以是來自父組件，回調動作創建者或測試中的模擬函數的回調，從而使組件更具可重用性和可測試性。

欲瞭解更多信息，請參見：

的Redux FAQ section on performance
的Redux FAQ entry on connecting multiple components
的Redux FAQ entry on components re-rendering too often
的Redux FAQ entry on importing the store directly
我React/Redux links list
最後，我的博客的Redux Performance節後Practical Redux, Part 6: Connected Lists, Forms, and Performance。

來源：我是Redux的維護者，也是Redux FAQ的作者。

來源

2017-06-17 03:42:34 markerikson

雖然Redux's docs說

我們推薦的選擇是使用一個名爲<Provider>到magically的特殊React Redux組件使存儲可用於所有包含應用程序中沒有明確傳遞它的組件。

連接了這個詞magically反應的語境功能。

所以store是可用的context對象，您可以通過this.context您的應用組件內部訪問，但要確保你知道how to use context第一

來源

2017-06-16 06:20:48 Faris

店在供應商類陣營上下文API的幫助下處理。

如果您要訪問存放在陣營組件，你必須定義在類contextTypes這樣的：

class App extends Component { 
    static contextTypes = { 
    store: PropTypes.object, 
    } 
    render() { 
    console.log(this.context) 
    return (
     <div className="App"> 
     <div className="individual"> 
      <House/> 
      <NameTag/> 
     </div> 

     </div> 
    ); 
    } 
}

如果你想要去的細節，你可以在這裏學習https://facebook.github.io/react/docs/context.html

來源

2017-06-16 06:22:31

但是，請注意，您**不應**通常以這種方式直接訪問商店。使用React-Redux'connect（）'函數來創建包裝器組件，以替代地管理商店訂閱。 – markerikson

@markerikson我同意。如果我們必須從存儲中訪問一些值，那麼我們應該使用connect（）函數來創建一個包裝器。但是我遇到了一種情況，我需要在共享同一商店的單個應用程序中處理兩個提供程序組件。在這種情況下，我使用上下文類型來獲得商店。 –

呃......沒有道理。你是否說_two_ Redux Providers纏繞在一起？還是一個Redux Provider和一個與其他庫相關的組件？ – markerikson

React獲取狀態提供者方法

回答

相關問題