我可以只将 onClick 函数连接到 Redux 商店，而不是连接按钮组件吗？

Question

我正在使用 react-redux 连接我的 Redux 存储中的数据。我发现了如何连接选择器（如mapStateToProps），以便在我需要时可以在 React 组件中作为道具使用数据。

我有一个 React 按钮组件，并且我已经为它提供了道具。从其他答案中，我想我可以看到如何指定 onClick 函数，以便 eventHandler 可以访问这些道具。

但是我意识到按钮本身并不需要这些道具，而需要它们的只是 onClick 事件。有没有办法将 onClick 函数连接到 Redux 商店而不是连接按钮组件？

我尝试了几种方法，但在类、函数、HOC、组合等方面有点迷失。

更新

更多上下文：在任何用户会话中，我对此 onClick 函数感兴趣的状态（地理）最初是从数据库中获取的，然后几乎没有改变。我想要实现的 onClick 操作是基于此地理数据的。如果地理数据确实发生了变化，那么 DOM 中的几乎所有内容都需要重新渲染。

---

感谢您的 cmets - 我进行了更多探索，并设法在名为 TestOnClick 的代码沙盒中创建了一个框架应用程序。我想这可能是我的问题的一个答案。

在应用中有两个按钮

• 一个人从商店获取数据作为道具，并像@lecstor 向我展示的那样使用它们投资 onClick 函数 - 我想这是相当标准的东西，但我是 React 的新手
• 另一个没有这样的 props，但调用了一个 onClick 函数，该函数本身使用 getState() 从 store 中获取相同的数据

两者似乎都可以扩展以做我想做的事，因为他们拥有做这件事所需的一切。 IF 所以我打算使用第二种按钮方法，其中按钮本身没有道具。

据我了解，使用 getState 而不是 connect 意味着如果 store 中的数据发生变化，Redux 不会通知我的函数重新渲染。但我不认为这是一个问题，因为作为一个 onClick 函数，没有什么需要渲染的，而且无论如何几乎整个 DOM 都需要重新渲染。我是否理解正确？

更新 2 我试图在我的真实项目中使用无道具按钮方法并面临循环依赖，所以它可能不是一个有效的答案。进一步探索。

Answer 1

您可以纯粹使用按钮来调用组件中的函数，该函数从道具或状态中读取数据/函数。

class Form extends Component {
  state = { name: "Fred" };

  onClick = () => {
    const { name } = this.state;
    const { userId, saveUser } = this.props;
    saveUser({ userId, name });
  };

  render() {
    return <button onClick={this.onClick}>Save Me</button>;
  }
}

Answer 2

如果我错了，请纠正我：您想将所需的最少道具传递给您的 Button 组件。理想情况下，只有单个函数可以访问state.geography.place，但不能访问状态。

如果你使用advanced connect options这是可能的

const mapStateToProps = state => ({
  opsdetails: placeSelector(state)
});

const mapDispatchToProps = dispatch => ({
  alertPlace(opsdetails) {
    console.log(opsdetails);
    alert(
      `Place via WithPropsButton is ${opsdetails.OPSCode}) ${
        opsdetails.OPSName
      }`
    );
    //dispatch(YOUR_ACTION)
  }
});

const mergeProps = (stateProps, dispatchProps, ownProps) => ({
  ...ownProps,
  alertPlace: () => dispatchProps.alertPlace(stateProps.opsdetails)
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps
)(WithPropsButton);

WithPropsButton 获取从mergeProps 函数返回的道具，即直接传递给它的任何自己的道具和alertPlace 函数。

这还允许简化组件并使其成为无状态函数：

const WithPropsButton = ({ alertPlace, ...remaining }) => (
  <button onClick={alertPlace} {...remaining}>
    With Props
  </button>
);

要记住的一件事：

alertPlace function prop 将在每次state.geography.place 更改时重新创建，因此如果连接的有状态组件很复杂，您希望避免重新渲染过于频繁（在这种情况下不是使用简单的按钮）进一步的更改是需要。

为避免重新渲染，您可以实现一个 shouldComponentUpdate 来忽略 alertPlace 道具更新。

我分叉了你的代码框并实现了我在这里谈论的内容。 请看https://codesandbox.io/s/pk60228qk0

Answer 3

如果不需要映射任何Props，可以使用null作为connect函数的第一个参数：

MyConnectedComponent = connect(
    null,
    mapDispatchToProps
)(MyComponent)