如何不使用Redux传递道具？
我刚刚了解到，我们可以使用redux降低react项目的复杂性。使用单一的真理源(存储)，我们不需要将状态传递给不需要它们的组件。我很难理解这句话。
假设我有三个组件，A、B和C。A是一个状态为text的容器。B是一个自定义按钮，C只显示文本。无论何时单击B，它都会更新A中的状态，然后C将显示更新的文本。
A
/ \
C B我试着将redux应用到应用程序中，发现我仍然需要传递道具。唯一的区别是我传递的是this.props.text而不是this.state.text。
我看不出redux如何能给这样的应用程序带来好处。
App.js
import React, { Component } from "react";
import { connect } from 'react-redux';
import MyButton from "./MyButton";
import { handleClick } from "./actions";
import Display from "./Display"
class App extends Component {
render() {
return (
<div className="App">
<MyButton onClick={()=>this.props.handleClick(this.props.text)} />
<Display text={this.props.text} />
</div>
);
}
}
const mapStateToProps = state => ({
text: state.text.text
})
const mapDispatchToProps = dispatch => ({
handleClick: (text) => dispatch(handleClick(text))
})
export default connect(mapStateToProps, mapDispatchToProps)(App)此外，如果我们有另一个应用程序的结构如下所示。假设B不关心A的状态，但是C需要它来显示文本。我们能跳过B然后让C使用A的状态吗？
A
|
B
|
C回答 2
Stack Overflow用户
发布于 2019-10-12 17:10:02
我想我找到了解决办法。我只是创建了一个文件stores.js并导出了这个商店。因此，每当子组件需要它时，我就可以通过调用store.getState()来导入它并检索状态。
你不该那样。
相反，您应该在每个组件中使用connect函数，这些组件在结构中的任何地方都需要访问存储的属性。
但是，如果您只有三个组件，您可能不需要Redux或应用程序状态的全局存储。
Redux提供了很多关于如何处理全局状态的意见，这是为了保护数据流的安全。
否则，如果您只需要避免钻入道具(即通过许多级别传递道具，如您的第二个例子)，则可以使用本机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 AppStack Overflow用户
发布于 2019-10-12 16:31:14
在本例中，您可以使用redux.将应用程序状态映射到支持。
我不明白为什么要以这种方式处理信息(使用redux)，除非您计划在应用程序的多个部分中使用数据，并且希望重用操作代码。
见更多信息：https://react-redux.js.org/using-react-redux/connect-mapstate
第二个问题
此外，如果我们有另一个应用程序的结构如下所示。假设B不关心A的状态，但是C需要它来显示文本。我们能跳过B然后让C使用A的状态吗？
在Redux是的。
与反应钩，是的。
https://stackoverflow.com/questions/58355723
复制相似问题
腾讯云开发者
