如何在React中使用Redux訪問其他組件的狀態？

我有兩個層次結構相同的組件。例如：如何在React中使用Redux訪問其他組件的狀態？

   _B 
Component A/
      \_C

我需要使用Redux的訪問C B的狀態值。這怎麼可能。 PS：是的，我可以將常見的狀態值存儲在父A中。但是我想在這裏使用REDX。我的理解是，您可以使用redux訪問任何組件狀態，因爲它是在頂級組件級別進行管理的。任何方式我可以直接訪問組件或行動中的商店？

來源

2017-09-15 informer

我不知道我是否正確地回答了您的問題，但正如您所說，Redux將商店保留在頂級組件級別，因此該商店很容易適用於所有子組件。事實上，這就是你如何使用Redux。

您可以使用連接裝飾器創建連接的組件，並將所需的任何道具從商店傳遞到組件。例。

/* This is your container component */ 
const mapDispatchToProps = { 
    your actions go here 
} 

const mapStateToProps = (state) => ({ 
    state, //pass this if you want to pass entire state 
    ...any props that you want to pass 
}) 

export default connect(mapStateToProps, mapDispatchToProps)(Your view component) //this basically connects your actions and state to your view component

如果您不希望創建任何連接的組件，並希望直接訪問您的視圖組件商店，那麼你可以從上下文中訪問它在你的構造。例。

class Example extends React.Component{ 
constructor(props, context) { 
    super(props); 
    //access your store like this 
    var store = context.store; 
    } 
} 

//You can define the context needed for your component like this 
Example.contextTypes = { 
store: React.PropTypes.object 
};

希望這會有所幫助。

來源

2017-09-15 10:03:59 codeslayer1

上下文環境是否也適用於兄弟組件？ – informer

如果您正在使用Redux並將應用商店定義爲App（最高）級別，那麼是，則此上下文將在所有組件中可用。 – codeslayer1

我不確定上下文是在應用程序中必須使用太多的東西，因爲它可以反轉工作流程的工作方式。是不是@ codeslayer1？ –

-1

UPDATE - 提問者想要與Redux一起使用上下文。我誤解了這個問題。我對這個特定主題沒有信心，所以我會引用FB React文檔。

「如果您不熟悉像Redux或MobX這樣的狀態管理庫，請不要使用上下文。對於許多實際應用程序，這些庫及其React綁定對於管理與許多組件相關的狀態。

這是更有可能的是終極版是你的問題不是這方面的解決方案是正確的解決方案。 ...

如果你堅持使用方面，儘管有這些警告，嘗試將上下文的使用隔離到一個小區域，並避免直接使用上下文API n可能，以便在API更改時更容易升級。「

https://facebook.github.io/react/docs/context.html

來源

2017-09-15 14:03:27

在哪裏答案我的問題在這裏？除了上下文之外，您有更好的方式來訪問兄弟姐妹商店的數據嗎？ – informer

對不起，當你說「我可以通過任何方式直接訪問組件或行爲中的商店？」我以爲你問的是如何在Redux中使用connect（）。我只是想幫助，但你沒有在你的問題中使用單詞上下文:( –

如何在React中使用Redux訪問其他組件的狀態？

回答

相關問題