Question

我刚刚了解到我们可以使用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

Answer 1

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

Answer 2

在此示例中，您可以使用redux将应用程序状态映射到道具。

除非您打算在应用程序的多个部分中使用数据并想重新使用操作代码，否则我不明白您为什么会以这种方式（使用redux）来处理信息。

查看更多： https://react-redux.js.org/using-react-redux/connect-mapstate

第二个问题

此外，如果我们还有另一个具有如下所示结构的应用程序。说B不在乎A的状态，但是C需要它来显示文本。我们可以跳过B而只让C使用A的状态吗？

在Redux中，是的。

使用React Hooks，是的。

如何不使用Redux传递道具？

2 个答案: