2 回答
TA貢獻1824條經驗 獲得超5個贊
我想我找到了解決方案。我只是創建了一個文件 stores.js 并導出了商店。所以我可以在子組件需要它時通過調用 store.getState() 來導入它并檢索狀態。
你不應該那樣做。
相反,您應該對需要訪問商店屬性的每個組件使用 connect 函數,在結構中的任何地方。
但是,如果您只有三個組件,您可能不需要 Redux 或應用程序狀態的全局存儲。
Redux 對如何處理旨在保護數據流的全局狀態提出了很多意見。
否則,如果您只需要避免 prop 鉆?。赐ㄟ^多個級別傳遞 props,如在您的第二個示例中),您可以使用本機 React 上下文 API 來做到這一點:reactjs.org/docs/context.html
用一個例子編輯事情應該更清楚:
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貢獻1802條經驗 獲得超5個贊
在這個例子中,你可以使用 redux 將應用狀態映射到 props。
我不明白為什么您會以這種方式(使用 redux)處理信息,除非您計劃在應用程序的多個部分使用數據并希望重新使用操作代碼。
查看更多:https : //react-redux.js.org/using-react-redux/connect-mapstate
第二個問題
另外,如果我們有另一個具有如下結構的應用程序。假設 B 不關心 A 的狀態,但 C 需要它來顯示文本。我們可以跳過 B 而讓 C 使用 A 的狀態嗎?
在 Redux 中,是的。
使用 React Hooks,是的。
添加回答
舉報
