2 回答

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊
我想我找到了解決方案。我只是創(chuàng)建了一個(gè)文件 stores.js 并導(dǎo)出了商店。所以我可以在子組件需要它時(shí)通過(guò)調(diào)用 store.getState() 來(lái)導(dǎo)入它并檢索狀態(tài)。
你不應(yīng)該那樣做。
相反,您應(yīng)該對(duì)需要訪問(wèn)商店屬性的每個(gè)組件使用 connect 函數(shù),在結(jié)構(gòu)中的任何地方。
但是,如果您只有三個(gè)組件,您可能不需要 Redux 或應(yīng)用程序狀態(tài)的全局存儲(chǔ)。
Redux 對(duì)如何處理旨在保護(hù)數(shù)據(jù)流的全局狀態(tài)提出了很多意見。
否則,如果您只需要避免 prop 鉆取(即通過(guò)多個(gè)級(jí)別傳遞 props,如在您的第二個(gè)示例中),您可以使用本機(jī) React 上下文 API 來(lái)做到這一點(diǎn):reactjs.org/docs/context.html
用一個(gè)例子編輯事情應(yīng)該更清楚:
import React, { Component } from "react";
import { connect } from 'react-redux';
import MyButtonCmp from "./MyButton";
import DisplayCmp from "./Display"
import { handleClick } from "./actions";
// I am doing the connect calls here, but tehy should be done in each component file
const mapStateToProps = state => ({
text: state.text.text
})
const Display = connect(mapStateToProps)(DisplayCmp)
const mapDispatchToProps = dispatch => ({
onClick: (text) => dispatch(handleClick(text))
})
const MyButton = connect(null, mapDispatchToProps)(MyButtonCmp)
class App extends Component {
render() {
return (
<div className="App">
{/* No need to pass props here anymore */}
<MyButton />
<Display />
</div>
);
}
}
// No need to connect App anymore
// export default connect(mapStateToProps, mapDispatchToProps)(App)
export default App

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
在這個(gè)例子中,你可以使用 redux 將應(yīng)用狀態(tài)映射到 props。
我不明白為什么您會(huì)以這種方式(使用 redux)處理信息,除非您計(jì)劃在應(yīng)用程序的多個(gè)部分使用數(shù)據(jù)并希望重新使用操作代碼。
查看更多:https : //react-redux.js.org/using-react-redux/connect-mapstate
第二個(gè)問(wèn)題
另外,如果我們有另一個(gè)具有如下結(jié)構(gòu)的應(yīng)用程序。假設(shè) B 不關(guān)心 A 的狀態(tài),但 C 需要它來(lái)顯示文本。我們可以跳過(guò) B 而讓 C 使用 A 的狀態(tài)嗎?
在 Redux 中,是的。
使用 React Hooks,是的。
添加回答
舉報(bào)