javascript - 如何不使用 Redux 传递 props？

Question

我刚刚了解到我们可以使用 redux 来降低 React 项目的复杂性。通过单一事实来源(存储)，我们不需要将状态传递给不需要它们的组件。我很难理解这个说法。

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

  A
 / \
C   B

我尝试将 redux 应用于应用程序，发现我仍然需要传递 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

Answer 1

I think I found the solution. I simply created a file stores.js and export the store. So I can import it and retrieve the state by invoking store.getState() whenever a child component needs the it.

你不应该这样做。

相反，您应该对结构中任何需要访问商店属性的每个组件使用 connect 函数。

但是，如果您只有三个组件，您可能不需要 Redux 或全局存储来存储您的应用状态。

Redux 提供了很多关于如何处理全局状态的意见，这些意见旨在保护您的数据流。

否则，如果您只需要避免 Prop 钻探(即通过多个级别传递 Prop ，如第二个示例中所示)，您可以使用 native 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