如何从redux 'connect‘迁移到钩子'useDispatch’和'useSelector'？
从redux 'connect'迁移到钩子'useDispatch'和'useSelector'的过程如下：
- 理解redux 'connect'的作用：'connect'是一个高阶函数，用于连接React组件与Redux store，将store中的状态映射到组件的props上，并且可以通过dispatch方法派发action。
- 理解钩子'useDispatch'和'useSelector'的作用：
- 'useDispatch'是一个React钩子，用于获取Redux store的dispatch方法，可以用来派发action。
- 'useSelector'是一个React钩子，用于从Redux store中选择并获取特定的状态。
- 迁移步骤： a. 替换'connect'的导入语句：
- 迁移步骤： a. 替换'connect'的导入语句：
- b. 替换'connect'的用法：
- b. 替换'connect'的用法：
- c. 使用'useDispatch'和'useSelector'：
- c. 使用'useDispatch'和'useSelector'：
- 迁移后的优势：
- 使用钩子可以更简洁地获取和操作Redux store中的状态和dispatch方法。
- 钩子的使用更符合React函数组件的编程风格，不再需要使用高阶组件的方式连接Redux。
- 迁移后的应用场景：
- 钩子的使用适用于任何需要使用Redux管理状态的React函数组件。
- 推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务：https://cloud.tencent.com/product/tke
- 腾讯云人工智能平台：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动应用分析：https://cloud.tencent.com/product/mapp
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
- 腾讯云音视频处理（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云网络安全防护：https://cloud.tencent.com/product/ddos
相关·内容
import { connect } from 'react-redux';import { createStructuredSelector} from 'Redux/auth/auth.selectors';
import CustomDrawer from '.createStructuredSel
浏览 35提问于2020-11-05得票数 0
回答已采纳
1回答
请告诉我如何得到结果 TrendMovieContainer.jsx import React from 'react';import { fetchTrending } from '../components/Trending';
const
浏览 21提问于2019-09-03得票数 1
回答已采纳
2回答
这是连接Redux商店和钩子的最佳方式吗？
嗨，我正在制作一个简单的todo应用程序，使用React连接到Redux。
浏览 0提问于2019-02-26得票数 0
回答已采纳
我不确定如何从redux迁移到钩子，就分派操作和从存储检索状态而言，因为没有提供官方指南。这条路对吗？import React, { useEffect } from 'react'importguestAreas) => adminAreas.concat(guestAreas
浏览 5提问于2019-07-08得票数 1
回答已采纳
我有一个类，我在其中使用useDispatch并在减法器中设置数据，我想在另一个类中使用我的数据，就像我在函数组件中使用useDispatch和使用useSelector一样，我可以从项目中的任何地方获取数据default userSlice.reducer;
const dispatch = useDispatchsetUser({ user: "
浏览 2提问于2020-11-26得票数 0
我需要将以下redux的特殊实现转换为一个replace实现--我是replace的初学者，我发现它很吸引人，我需要替换connect()函数，并将分派映射到和userSelector中。import React, { useEffect } from 'react' import { fetchUsers=> { fetchU
浏览 0提问于2020-02-16得票数 0
回答已采纳
我使用Redux存储完全填充了返回状态的类组件： componentDidMount() {state.topRatedMovies; topRatedMovies, error};
fetchTopRatedMovies)(TopRatedComponent);
但是，当我将上
浏览 3提问于2020-11-06得票数 0
回答已采纳
1回答
/actions/user_actions';// LoginForm.js
const dispatch = useDispatch(); const formToSubmit = {email:onPress={submitUser} />
浏览 2提问于2019-11-01得票数 0
回答已采纳
我正试图通过我的申请使这个钩子恢复正常。import React, { useEffect, useRef } from "react"; }
}, []); // array prevents an infinite loo
浏览 1提问于2020-03-10得票数 0
回答已采纳
我显然遗漏了一些关于这应该如何工作的东西。我有一个切片，它有缩减器，我可以把它们带进来，我可以看到console.log像预期的那样启动…buuut Redux Dev Tools显示我没有改变我的状态-默认的null仍然是列出的值。
浏览 13提问于2021-09-18得票数 0
回答已采纳
我有一个函数组件，它使用redux从api中获取数据。const useFetching = (someFetchActionCreator) => { useEffect((dispatch(someFetchActionCreator());}export function Trips(props) {
const trips = useSelector如何在调出所获取的
浏览 3提问于2020-04-11得票数 4
回答已采纳
我遇到了一个使用useDispatch找不到的函数。据推测，我应该使用react，不幸的是，我的版本是6.0.0，所需的是7.0.0及以上。我想研究一下useDispatch或相关的钩子，以便在一个函数组件中分派一个动作函数。如果我不能升级自己的redux&仍然使用函数组件，我该如何做到这一点？import React, { useDispatch } from 'react'; Tooltip,
浏览 3提问于2021-01-28得票数 4
回答已采纳
然后 import React, { Component } from 'react';import { bindActionCreators(mapStateToProps, mapDispatchToProps)(Example); 现在 import React from 'react';
浏览 12提问于2020-02-01得票数 0
4回答
我正在尝试找出在react钩子中使用redux的最佳方式。我看到了以下内容
我还看到了以下内容，看起来很不错。
谢谢
浏览 3提问于2019-03-28得票数 2
2回答
document.getElementById('root'));在App.js中，我触发一个gettoken函数，并希望将它存储在本地状态和redux中：
}const dispatch = useDispatch();
let钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1.您可能有与React<
浏览 4提问于2020-01-02得票数 2
回答已采纳
我正要用React-Redux开始一个项目。对于API引用，有Hooks和connect()。因此，Hooks是连接API的替代。使用钩子或连接到我的React-Redux项目有什么不同？
浏览 0提问于2019-09-20得票数 16
2回答
另一个组件中的Redux访问状态
、、、、
我有一个组件(Add Page)，用户可以在其中添加“name”和“weight”。我希望发生的是当用户单击提交时，添加的'name‘和'weight’将显示在另一个组件(主页)上。我的DevTools显示状态正在使用添加的名称和权重进行更新，但我不知道如何访问它。const [weight, setWeight] = useState(0); const dispatch = useDispatchaddMov
浏览 17提问于2021-05-18得票数 0
为了实现这一点，我决定在setInterval()反应钩子中使用useEffect()。效果很好。 }, 4000);}, [NBackState]);
我可以使用我在按钮中构建的钩子来更新redux存储，但是useSelector()钩子在useEffect()中返回默认的<em
浏览 28提问于2022-10-21得票数 -1
我刚开始使用React & Redux，我使用过的许多指南都是几年前的。React和Redux中的钩子似乎都是比较新的，我看到的一般建议是用函数组件和useState()替换React中的类组件。在我进行Redux练习时，我不清楚的是mapStateToProps()、mapDispatchToProps()和connect()是否仍然相关，或者我现在是否可以用useSelector()和useDis
浏览 6提问于2020-12-18得票数 4
回答已采纳
我对redux在功能组件中的使用感到有点挣扎。如何从功能组件调用操作。我看过一些使用react的教程。这对我来说很有意义。但是，这些教程调用操作类型，而不是创建操作类型的函数。我的案子：<LoadedNavbar isAuthenticated = {isAuthenticated
浏览 3提问于2020-08-16得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
