将多个组件连接到 React Redux Store答案

【问题标题】：Connecting multiple Components to the React Redux Store将多个组件连接到 React Redux Store
【发布时间】：2020-05-05 07:58:01
【问题描述】：

我最近才开始使用 Redux，并设法使用以下代码将我的 <App /> 组件连接到商店：

const mapStateToProps = state => ({
    ...state,
});

const mapDispatchToProps = dispatch => ({
    writeSomething: () => dispatch(writeSomething),
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

这很简单，当我按下一个按钮时，writeSomething 会被调用，它会将 false 变为 true，并且工作正常。

但后来我想将我的其他组件连接到商店并注意到我必须从那里复制粘贴整个代码，然后我还必须导入 writeSomething。这看起来很重复而且不好玩，所以必须有更好的方法来做到这一点，对吧？我四处搜寻，并没有真正找到我想要的东西，所以我想知道：是否有一种更简单、更快捷的方式来连接到商店，或者我是否必须为我想要的每个组件复制/粘贴我的代码连接到 redux 商店？

【问题讨论】：

使用 HOC 高阶组件！
为什么不试试钩子。 react-redux 有称为 useDispatch、useSelector 的钩子。 useDispatch 将调度和操作，而 useSelector 将获取状态。做钩子的方式很有趣。

标签： reactjs redux

【解决方案1】：

是的，我想这就是我们必须遵循的结构，但你可以使用上下文来防止这种情况发生，或者你可以使用 HOC 来避免重复

【讨论】：

【解决方案2】：

您可以使用 HOC 来避免代码重复，也可以使用自定义挂钩。

【讨论】：

【解决方案3】：

为什么不试试钩子。 react-redux 有称为 useDispatch、useSelector 的钩子。 useDispatch 将调度和操作，而 useSelector 将获取状态。做钩子的方式很有趣。

https://levelup.gitconnected.com/react-redux-hooks-useselector-and-usedispatch-f7d8c7f75cdd

这样，您将获得更简洁、更有条理的代码。

【讨论】：

从未使用过钩子，如果一次学习 2 件事是个好主意，但我会尝试一下