如何不使用 Redux 传递 props？

Question

我刚刚了解到我们可以使用 redux 降低 React 项目的复杂性。使用单一的真实来源（存储），我们不需要将状态传递给不需要它们的组件。我正在努力理解这个声明。

假设我有三个组件，A、B 和 C。A 是一个容器，其状态称为text. B 是自定义按钮，C 仅显示文本。每当单击 B 时，它都会更新 A 中的状态。然后 C 将显示更新后的文本。

  A

 / \

C   B

我试过将redux应用到app上，发现还是需要把props传下来。唯一的区别是我正在传递this.props.text而不是this.state.text.

我看不出 redux 如何使这样的应用程序受益。

应用程序.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

Answer 1

我想我找到了解决方案。我只是创建了一个文件 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';&nbsp;import MyButtonCmp from "./MyButton";import DisplayCmp from "./Display"import { handleClick } from "./actions";&nbsp;// I am doing the connect calls here, but tehy should be done in each component fileconst mapStateToProps = state => ({&nbsp; &nbsp; text: state.text.text})const Display = connect(mapStateToProps)(DisplayCmp)const mapDispatchToProps = dispatch => ({&nbsp; onClick: (text) => dispatch(handleClick(text))})const MyButton =&nbsp; connect(null, mapDispatchToProps)(MyButtonCmp)class App extends Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; {/* No need to pass props here anymore */}&nbsp; &nbsp; &nbsp; &nbsp; <MyButton />&nbsp; &nbsp; &nbsp; &nbsp; <Display />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}// No need to connect App anymore// export default connect(mapStateToProps, mapDispatchToProps)(App)export default App

Answer 2

在这个例子中，你可以使用 redux 将应用状态映射到 props。我不明白为什么您会以这种方式（使用 redux）处理信息，除非您计划在应用程序的多个部分使用数据并希望重新使用操作代码。查看更多：https&nbsp;:&nbsp;//react-redux.js.org/using-react-redux/connect-mapstate第二个问题另外，如果我们有另一个具有如下结构的应用程序。假设 B 不关心 A 的状态，但 C 需要它来显示文本。我们可以跳过 B 而让 C 使用 A 的状态吗？在 Redux 中，是的。使用 React Hooks，是的。