如何不使用 Redux 传递 props？答案

【问题标题】：How not to pass down props using Redux?如何不使用 Redux 传递 props？
【发布时间】：2019-10-12 15:35:56
【问题描述】：

我刚刚了解到，我们可以使用 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 如何让这样的应用受益。

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

【问题讨论】：

我想我找到了解决方案。我只是创建了一个文件stores.js 并导出了商店。所以我可以在子组件需要它时调用store.getState() 来导入它并检索状态。
将 props 向下传递到多个组件以便它可以到达链底部的单个组件（在本例中为 C）的做法称为“prop Drilling”。我不想直接将其添加到标题中，但希望这对 SEO 有所帮助。

标签： javascript reactjs redux react-redux

【解决方案1】：

我想我找到了解决方案。我只是创建了一个文件 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 App

【讨论】：

你能添加一些示例代码吗？我想，这个线索可能不足以作者（否则他们已经 connect() B 和 C 而没有 connect()ing A）
@giuseppedeponte 非常感谢您的详细解释！我想我误解了connect()() 之前的工作方式。所以我的理解是，通过连接组件，只要store 中的状态更新，它就会重新渲染。存储就像存储所有状态的最高阶组件。我可以使用mapStateToProps() 获取状态，而不是调用返回巨大对象的store.getState()。

【解决方案2】：

在本例中，您可以使用 redux 将应用状态映射到 props。

我不明白为什么要以这种方式（使用 redux）处理信息，除非您计划在应用程序的多个部分中使用数据并希望重用操作代码。

第二个问题

另外，如果我们有另一个结构如下所示的应用程序。假设 B 不关心 A 的状态，但 C 需要它来显示文本。我们可以跳过 B 让 C 使用 A 的状态吗？

在 Redux 中，是的。

使用 React Hooks，是的。

【讨论】：