如何使用 useStore、useSelector、useDispatch 钩子？

【问题标题】：How to use useStore, useSelector, useDispatch hook?如何使用 useStore、useSelector、useDispatch 钩子？
【发布时间】：2019-07-25 08:46:40
【问题描述】：

Redux 7.1.0 版发布了新的钩子。我不明白如何在实践中使用这些钩子。有人可以举例说明如何使用这些钩子吗？

【问题讨论】：

官方文档呢？ react-redux.js.org/next/api/hooks 看起来不错。 :) 在大多数情况下，你只需要 useSelector 作为 mapStateToProps 的替换和 useDispatch 来替换 mapDispatchToProps。
@PavelKratochvil 我怎么理解他想看看如何使用它们的例子？对我来说，官方文档没有正常的例子。
@PavelKratochvil 一个很好的例子就是实践中的例子。首先有解释，然后是实际使用。 Watch it
@markerikson 初学者会很难理解 redux hooks。我会添加实际示例。
@Brigita-Wasi 我来自这些新手，你说的都对

标签： reactjs redux react-redux react-hooks

【解决方案1】：

请参阅sample。

useSelector 就像mapStateToProps，你从 store 中选择属性，当 store 改变时组件会更新
useDispatch 只是返回 dispatch。这就像用空的第二个参数调用 connect()。
useStore 用于检索store。但是这种存储访问只能用于存储操作，例如reducer替换。当 store 改变时，以这种方式访问 store 的组件不会更新。

单击上面示例中的 Check2 按钮，直到您单击“更新我”按钮后才会检查 check2

【讨论】：

为什么这里需要toString()？没有这个。？当我删除toString()时，原来check1是不可见的。link
toString() 需要显示 check1 和 check2 的值，因为它们是布尔值。它仅用于渲染
在您的示例中，更改这部分代码`Counter: {counter.toString()}`。
@Fyodor 我同意提格兰大帝的观点。你为什么这么写`Counter: {counter.toString()},could just Counter: {counter}`。
是的，当然。 counter 不需要 toString()。删除它。

猜你喜欢

2021-10-30
2020-01-26
2021-02-13
2023-04-03
2020-05-02
1970-01-01
1970-01-01
2020-06-09
1970-01-01

相关资源

下载 2023-02-17
下载 2023-02-15
下载 2023-02-14

最近更新更多

热门标签

Java Python linux javascript Mysql C# Docker 算法前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库数据结构大数据 js 机器学习微服务 Android Go 程序员面试 JVM ASP.net core 云原生人工智能后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习多线程 React 架构 devops 爬虫云计算 Spring Boot LeetCode