Question

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

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

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

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

这很简单，当我按下一个按钮时，writeSomething被调用，它将false转换为true，并且效果很好。

但是后来我想将其他组件连接到商店，并注意到我必须从那里复制粘贴整个代码，然后还必须导入writeSomething。这看起来非常重复且不好玩，因此必须有更好的方法来进行，对吗？我四处搜寻，找不到真正想要的东西，所以我想知道：是否有一种实际上更方便，更快捷的连接商店的方法，还是我需要为每个想要的组件复制/粘贴我的代码？连接到redux商店？

Answer 1

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

Answer 2

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

Answer 3

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

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

通过此操作，您将获得更简洁，更有条理的代码。

将多个组件连接到React Redux存储

3 个答案: