React Hooks项目中使用Redux——手拿把掐

最近在写一个react hook的项目，在如果使用redux中遇到一些困难，昨天研究了一下午，学会了两个方法，并且用了用，所以赶紧分享一下，虽然用了不少时间，但是感觉收获满满，同时我也感觉到自己的好多不足，比如在看英文文档的时候感觉自己真实一点都看不懂

为什么要使用hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
可以参考reat官网

什么是redux

官方解释:Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预测的状态容器

用来解决一些复杂的逻辑问题

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

上面这些情况是 Redux 的适用场景：多交互、多数据源。

如果你还不了解redux可以参考以下文档：

• 官方文档（英文的）
• 中文文档（学习足够）
• 还有一个我非常推崇的阮一峰写的Redux 入门教程

什么是react-redux

为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux

这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。

• 官方文档
• 中文文档

在Hook中使用redux

当你掌握了上面的知识之后，就要实际应用了，你会发现不知道该如何使用，可能你在类式编程中使用，那么在Hook中呢？？
接下来就该玩活了
下面是 react-redux提供的两个方法

useSelector()

从 react-redux 包中导入 useSelector。使用 useSelector hook，我们可以读取我们的状态。

import {
useSelector } from "react-redux";
/*
这是最简单的使用，这个state的就是redux/store文件弄出来的，
在App.js中<Provider store={store}></Provider>中包着出来的（我的理解）
*/
const state = useSelector(state => state.user)

useDispatch

useDispatch hook 让我们执行 redux 操作。 我们从 react-redux 包导入 useDispatchhook。

使用 useDispatch 相对简单，我们将 hook 实例保存在一个变量下。我们可以在任何事件监听器中调用 dispatch 函数。

import { useDispatch } from "react-redux";
const dispatch = useDispatch();
//引入redux/actions中你定义的异步操作名，我当时写的是login
import { login } from "@/redux/actions";
// 这里面的state就是上面用useSelector()接到的数据
dispatch(login(state));

可以参考react-redux提供的关于hook的文档，但是他是中文的

总结

我个人感觉有了这两个方法在代码变得方便了很多，上面提供的文档还有一些方法，由于我英文不好，也没来的及学习，欢迎大家与我交流

最后

以上就是香蕉网络为你收集整理的React Hooks项目中使用Redux——手拿把掐的全部内容，希望文章能够帮你解决React Hooks项目中使用Redux——手拿把掐所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。