React redux钩子useDispatch函数完成后如何调用
React Redux是一个用于管理应用程序状态的库。它结合了React和Redux，提供了一种简单且高效的方式来管理应用程序的状态和数据流。
在React Redux中，useDispatch是一个React钩子函数，用于向Redux存储库派发操作。它允许我们在组件中触发Redux中的操作，以更新应用程序的状态。
使用useDispatch函数的步骤如下：
- 导入useDispatch函数：
import { useDispatch } from 'react-redux';- 在组件中调用useDispatch函数，以获取dispatch函数的引用：
const dispatch = useDispatch();- 使用dispatch函数来触发Redux中的操作。dispatch函数接受一个action对象作为参数，用于描述要执行的操作。例如，我们可以使用dispatch函数来触发一个增加计数器的操作：
dispatch({ type: 'INCREMENT' });在上面的示例中，我们使用dispatch函数触发了一个类型为'INCREMENT'的操作。这个操作将被Redux存储库中的相应reducer处理，以更新应用程序的状态。
需要注意的是，为了能够使用useDispatch函数，我们需要在应用程序的顶层组件中使用Provider组件来包裹整个应用程序，并将Redux存储库作为其属性传递给Provider组件。
React Redux的优势在于它提供了一种简单且高效的方式来管理应用程序的状态和数据流。它通过将应用程序的状态集中存储在Redux存储库中，并通过组件之间的明确的数据传递来保持状态的一致性。这样可以提高应用程序的可维护性和可扩展性。
React Redux的应用场景非常广泛，适用于各种规模的应用程序。无论是小型的个人项目还是大型的企业级应用程序，React Redux都可以帮助我们更好地管理应用程序的状态和数据流。
腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。这些产品可以帮助开发者在云计算领域构建和部署应用程序。具体而言，对于React Redux应用程序，可以使用腾讯云的云服务器来托管应用程序的前端和后端代码，使用云数据库来存储应用程序的数据，使用云存储来存储应用程序的静态资源。
以下是腾讯云相关产品的介绍链接地址：
请注意，本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，因为根据问题要求，我们不直接提及这些品牌商。
相关·内容
我正在将redux项目的react从类组件转换到钩子。
为了分派操作，我正在从react-redux导入{ useDispatch }。
然后，在每个功能组件中，我都有
const dispatch = useDispatch();
然后
dispatch(someAction())
这是正确的处理方法吗?还是应该将const dispatch = useDispatch()抽象到一个单独的文件中并始终重用？
谢谢
浏览 10提问于2020-05-22得票数 1
回答已采纳
在useEffect获取数组并将其分配到redux状态后，我正在试图映射一个雇员列表。如果我控制台日志，我看到一个充满对象的数组，但我的组件似乎没有重新呈现。有什么建议吗？
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setEmployees } from '../redux/reducers/employeeListReducer'
import employeesService
浏览 2提问于2020-07-25得票数 0
2回答
我试图在组件的呈现函数中使用useDispatch。
import { useDispatch } from 'react-redux';
我有一个输入试图在useDispatch on onChange
onChange={() => useDispatch()(update("test"))}
当onChange被触发时，我会得到以下错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多
浏览 7提问于2019-10-15得票数 4
回答已采纳
1回答
这个视图不适用于redux，我需要在react类组件中使用redux分派，但是我得到了错误
“无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：\N1。您可能有与for和呈现器(例如function )\n 2不匹配的版本。您可能正在破坏Hooks \n 3的规则。您可能在同一个应用程序\nSee 中有多个function副本，以了解如何调试和解决这个问题。”
inspectionView.jsx
import React from "react";
import {
Text,
View,
} from "react-native
浏览 8提问于2022-08-15得票数 0
我试图在一个自定义钩子中实现useDispatch，该钩子分配一个redux操作，但我得到了以下错误：
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breakin
浏览 0提问于2019-10-24得票数 5
回答已采纳
3回答
我正在尝试实现一个静态方法，以使我的代码更简洁。在我试着这么做之前，它一直运作得很好：
// Auth.js
import {useDispatch} from 'react-redux';
import {signOut} from './redux_actions';
export class Auth {
static signOut = () => {
const dispatch = useDispatch();
dispatch(signOut())
}
}
// Menu.js
import
浏览 2提问于2019-10-23得票数 0
回答已采纳
我有这个组件：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';
const clientes = () => {
const dispatch = u
浏览 1提问于2021-04-03得票数 2
我试图在一个特定的测试中模拟useDispatch。我试着这样模仿： import * as reactRedux from "react-redux"; const useDispatchMock = jest.spyOn(reactRedux, "useDispatch"); 在运行测试时，useDispatch仍然是一个正常的函数。 使用Jest 26.6.3 React Redux 7.2.4
浏览 83提问于2021-08-26得票数 0
回答已采纳
1回答
在下面的代码中，我想知道如何导出函数setFormData。换句话说，我还想知道如何从不同的类型记录文件中导入setFormData。谢谢
文件A
import { SyntheticEvent } from 'react';
import { useDispatch } from 'react-redux';
import { useStatusActions } from '../../actions';
export const StatusHelper = () => {
const dispatch = useDispatc
浏览 1提问于2021-01-03得票数 0
我遵循了react教程，下面的模式经常出现在示例代码中：
import { useDispatch} from 'react-redux'
...
const dispatch = useDispatch()
像这样重新声明调度函数的目的是什么？
我查看了react redux代码和(我认为？)钩子工厂返回一个函数。那么，重新声明调度钩子的目的是将其用作函数表达式而不是函数声明以提高性能吗？
为什么useSelector钩子没有这样做呢？
提前感谢
浏览 5提问于2020-08-25得票数 1
回答已采纳
1回答
我对redux非常陌生，在这里，我尝试创建一个公共分派函数，可以从多个组件调用该函数，但似乎不能在我的公共组件中使用useDispatch()，以获得无效的钩子调用错误。
import { useDispatch, useSelector } from "react-redux";
import { UPDATE_PREVIEW_DATA } from "../../redux/types";
export default function setPreviewData(event, obj, lang) {
const dispatch = useDis
浏览 0提问于2022-07-10得票数 0
import React, { useReducer } from "react";
..。
import { useDispatch } from "react-redux";
..。
import { createStore } from "redux";
const store = createStore(
..。我看到所有的操作都会触发，但是useReducer调度不会更新redux状态。
浏览 0提问于2020-04-02得票数 8
回答已采纳
2回答
我是react-redux的新手。我有这个代码，我正在使用react，redux和TypeScript。在这段使用基于类的组件的代码中，我想使用dispatch来调用动作来增加counter的值，但这给了我以下错误。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of Re
浏览 34提问于2020-02-12得票数 2
回答已采纳
1回答
在我的React代码库中，我集成了Redux工具react-redux，并使用useDispatch钩子从我的视图中分派操作。我只是有一个问题，我不能访问更新后的值刚刚更新的商店。是否有一种方法可以让我像await一样等待状态更新的完成，或者类似于一个回调，在那里我可以执行其他代码？
我的代码是这样的：
import React from 'react';
import { useDispatch } from "react-redux";
import { setCore } from "../store/global";
// the va
浏览 1提问于2019-11-12得票数 8
基于在前面的文章中收到的帮助，我现在使用React本机功能组件和更新的Redux挂钩来获取和设置全局Redux状态变量。
当试图创建一个外部函数(文件"authentication.js")时出现了问题，该函数试图使用"useSelector“Redux函数获取存储变量”用户名“的值。
它在外部文件"DetailsScreen.js“中运行得很好，但在另一个外部文件"authentication.js”中却失败了，尽管在我的未受过训练的人看来，代码是一样的，有一些明显的细微差别。
这段代码工作得很完美：
DetailsScreen.js
import R
浏览 0提问于2021-11-04得票数 0
我需要从使用它的项目中创建一个需要状态使用的共享组件(使用分派函数来操作redux存储中的状态)，并且使用此组件的项目使用Redux作为其状态管理系统。所以我的问题是，让父组件(使用此共享组件的项目)中的useDispatch钩子中的“调度”函数作为道具传递给此共享组件，以便在此组件中使用它，这是实现它的正确方式吗？它会引起任何副作用吗？ 下面是一个简单的代码片段来演示上面提到的实现： 父组件： import React from 'react'
import { useDispatch} from 'react-redux'
import ChildComp
浏览 13提问于2021-01-25得票数 1
回答已采纳
我不确定如何从redux迁移到钩子，就分派操作和从存储检索状态而言，因为没有提供官方指南。这条路对吗？
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { createSelector } from 'reselect'
import { actions, selectors } from 'data'
import TemplateComponent from '.
浏览 5提问于2019-07-08得票数 1
回答已采纳
我有多个调制解调器，显示和隐藏它们的条件存储在Redux存储中。为了避免打字，我导出这样的动作.
//reduxStuff.js
export const modalNameHide = () => {
return { type: "MODALNAMEHIDE" };
};
export const modalNameShow = () => {
return { type: "MODALNAMESHOW" };
};
当我需要隐藏模式的功能时，我会这样做.
//HideModalButton.js
import { modalNam
浏览 3提问于2020-02-18得票数 0
回答已采纳
1回答
我使用redux-thunk调用api。我想获取包含在动作数据中的结果 如果我查看控制台，看到组件已经分派了fetchTrending()，就会返回promise。 请告诉我如何得到结果 TrendMovieContainer.jsx import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTrending } from '../actions/index';
import Trending from
浏览 21提问于2019-09-03得票数 1
回答已采纳
1回答
我正在学习如何反应和挂钩，我想知道为什么我不能直接调用钩子。例如:在redux中，我们有一个名为useDispatch()的钩子，但是要使用它，我必须将它分配给一个const。例如：
const dispatch = useDispatch()
然后开始使用它，调用：
dispatch(someAction(state))。
为什么不可能直接调用它：useDispatch(someAction(state))
浏览 2提问于2022-02-28得票数 0
回答已采纳
我构建了一个Pokedex，运行良好，但是，我在React-Redux Dev工具中看到了一个“问题”： ? "getPokemonsInfo“在"getPokemonsUrls”之前被调用，但是，"getPokemonsInfo“应该只在状态的属性发生变化时调用(使用useEffect())，而这种情况发生在"getPokemonsUrls”中。 import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-r
浏览 6提问于2021-01-23得票数 1
回答已采纳
1回答
我有一个函数组件，我想用jest编写测试。但我无法评估结果。我应该如何为这样的组件编写测试？下面是我要测试的组件：
import React from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { addExpense } from "../store/expenses/a
浏览 7提问于2021-12-29得票数 0
回答已采纳
2回答
我读到statefull functional component中的内部函数应该在我们使用setState时使用useCallback定义，否则该函数将作为prop传递给子组件。但是，如何调度操作呢？我们也需要在那里使用'useCallback‘吗？
import React from "react";
import { logout } from "../../../../actions/auth";
import { useDispatch } from "react-redux";
function Navbar (props)
浏览 1提问于2021-04-05得票数 2
我有一个自定义钩子，它调用一个saga函数，然后在测试这个函数im获取时调用一个axios。
TypeError:未定义不是一个函数
我只想测试这个函数是否被调用了。
postsHook.test.tsx
import { renderHook } from "@testing-library/react-hooks";
import usePostsHook from "./postsHook";
import { initCommentUpdates, getPostsInit } from "../actions/postActions"
浏览 0提问于2020-05-14得票数 0
回答已采纳
1回答
注销函数通过发出API调用并从LocalStorage和Redux存储中删除该用户的信息来注销用户。因此，这个函数使用两个钩子: useDispatch和useFetch (自定义钩子)
import {useDispatch} from 'react-redux'
import {disconnectUser} from 'store/authentication/authentication.slice'
import useFetch from 'api/useFetch'
import {routes} from 'routes/
浏览 1提问于2022-01-05得票数 3
回答已采纳
3回答
如何制作电子两个窗口的存贮
、、、、
我用react制作了两个不同的窗口，并提供了相同的商店。但是，如果我在一个窗口中存储数据，则第二个窗口不会更改。并且idk知道如何同步。(所有的还原器和作为默认反应项目所做的动作)
First provide(index.js):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import store from "../re
浏览 6提问于2020-10-30得票数 5
我有一个storeMethods，我用它来替换一个redux容器。问题是它没有执行这个函数，所有其他函数都像editComment、likePost等。
storeMethods().createPost(postData);
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
storeHooks.tsx
import usePostsHook from "./postsHook";
import useNotificationHook from "./notificationHook";
import { useDis
浏览 2提问于2020-05-12得票数 1
回答已采纳
2回答
无效钩子调用反应
、、
构建您自己的钩子可以将组件逻辑提取到可重用的函数中。这就是我想要做的:将我的组件逻辑提取到其他组件的可重用函数中。
我的职能部分：
//React
import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';
//Local
import UserPreview from './UserPreview';
import defaultContainer from '../../shared/styles/default
浏览 10提问于2020-08-01得票数 2
回答已采纳
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { getItem } from "../../utility/localStorage";
import { getMemoWithUser } from "../../redux/memo/actionCreator";
const MemoList = () => {
var [memo, setMemo] = useSt
浏览 4提问于2022-01-23得票数 0
回答已采纳
我的问题是，我把上述方法放在哪里？因为在我想要使用Redux存储的每个组件中，我需要基本上重复
import { useSelector, useDispatch } from "react-redux";
import { bindActionCreators } from "redux";
import * as actions from "../../redux/actions";
然后，例如，
const dispatch = useDispatch();
const { fetchStats } = bindActionCreators
浏览 0提问于2021-11-29得票数 0
回答已采纳
我试图通过useDispatch方法更新redux中的商店，但是我收到了这样的消息：
试图导入错误：“useDispatch”不是从“redux”导出的。
我使用这个方法来调用操作来更新我的商店。
import { useDispatch } from 'react-redux';
import { loggedInAction } from './redux';
const userInfo = () => {
const dispatch = useDispatch();
const loggedIn = user => dispatc
浏览 1提问于2019-06-10得票数 19
回答已采纳
3回答
ExceptionsManager.js:179错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
在Playbutton组件中获取此错误
Playbutton.js
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "
浏览 8提问于2022-03-14得票数 0
我目前正在尝试学习一些typescript/redux/reactnative。 我想我已经掌握了redux如何处理状态管理的基本概念。然而，我现在有点卡住了，试图让异步状态管理与redux thunk中间件一起工作。 到目前为止，我已经得到了这个简单的反例： Rootreducer.tsx import { combineReducers } from "@reduxjs/toolkit";
import { create } from "react-test-renderer";
import { createStore, applyMiddleware
浏览 45提问于2020-12-30得票数 1
回答已采纳
1回答
给出了以下反应成分：
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { store, StoreState } from "../../redux/actions";
import { setBackgroundAction } from "../../redux/title.actions";
import "./Loader.scss&#
浏览 2提问于2020-06-22得票数 0
回答已采纳
我有一个功能风格--，在这里我可以愉快地调用我的Redux操作：
import * as React from 'react';
import {Text, View, StyleSheet, Dimensions} from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';
import {useSelector, useDispatch} from 'react-redux';
import {updateNumPo
浏览 1提问于2022-07-20得票数 0
回答已采纳
2回答
我试图在React中的组件之间交换一些数据，并尝试使用Redux。
我真的在寻找简单的功能(存储资料，检索资料)。
我在文件夹src/reducers/currentToken还原er.js中有一个文件：
const currentTokenReducer = (state, action) => {
switch(action.type){
case 'SETTOKEN':
return action.payload
case 'GETTOKEN':
return s
浏览 4提问于2020-01-02得票数 2
回答已采纳
1回答
因此，我在redux中有一个异步thunk函数：
export const fetchItem = createAsyncThunk('item/fetchItem', async (id: number) => {
const res = await fetch(`${apiUrl}/${id}`)
.then(res => res.json())
return res
})
下面是function中的fetch函数，它通过事件目标的html id (一个标记)获取项目：
const handleFetch = (e: R
浏览 10提问于2022-11-15得票数 0
回答已采纳
因此，当在useDispatch中使用useEffect时，我会收到以下错误
第58:5行: React "useDispatch“不能在回调中调用。必须在React函数组件或自定义React函数React /rules of Hooks中调用react。
我有如下所示的组件
import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';
const Component = () => {
const
浏览 6提问于2021-10-01得票数 0
回答已采纳
我有很多调用dispatch() (Redux)的功能React组件。dispatch()函数本身是由react-redux的useDispatch()钩子传入的。
作为一个简化的例子：
const LogoutButton: FC = () => {
const dispatch: Dispatch = useDispatch();
return (
<button onClick={() => {
console.log("Clicked...") // To check that onClick() simulation i
浏览 3提问于2020-06-25得票数 4
回答已采纳
我的Redux状态是如何更新的，并可以在pokelist.js文件中注销，但是我的状态变量没有正确设置，cardList仍然是一个空数组，我如何正确设置状态？我注销了pokelist.js文件中的集合，该文件首先注销一个空数组，然后注销一个包含元素的数组。
// reducer.js file
import { GET_LIMIT_NAMES } from '../actions/PokedexActions';
const initialState = {
collection: []
};
export default (state = initialState
浏览 11提问于2019-11-17得票数 0
React "useDispatch“在函数"loginForm”中被称为“loginForm”，它既不是React函数组件，也不是自定义的React函数react钩子/规则的钩子。
我收到这样的信息。附加密码..。
import React from 'react'
import { useDispatch} from 'react-redux'
const loginForm = () => {
const dispatch = useDispatch()
return (
<div>lgoinFor
浏览 6提问于2020-07-08得票数 1
回答已采纳
react-redux库提出了useDispatch，它是一个只能在函数组件中使用的钩子。
import React from 'react';
import {useDispatch} from 'react-redux';
import {action} from './actions';
const funComp = () => {
const dispatch = useDispatch();
const performAction = () => { dispatch(action()) }
return &
浏览 2提问于2020-07-09得票数 0
我有单独的文件，在那里我做我的get和post axios调用。所以在这个文件中我有这样的代码
import { useSelector, useDispatch } from "react-redux";
import __ from 'lodash'
import axios from "axios";
import { getPersistedToken } from "src";
import { PROCESS_STATUS } from "src/model";
export
浏览 2提问于2021-09-13得票数 0
回答已采纳
给出一些背景：
我正在尝试构建一个登录表单页函数来检测用户是否已经登录。如果它们已登录，则会出现一个按钮，提示用户注销。就像这样：{user ? userLoggedInAlert() : SignIn()}如果user是真，那么按钮就会出现，如果user是假的，那么他们就会收到用户名和密码表单来进行登录身份验证。
我已经确定了所有的功能。但是，当我按下按钮以注销用户退出时，我会收到以下错误：
×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This
浏览 3提问于2021-02-05得票数 4
回答已采纳
1回答
一个组件显示了一个值列表，我试图隐藏关于这些值是如何得到的所有信息，基本上是将状态的关注从组件本身中分离出来，这样在将来获取API数据的任何更改、使用什么存储等等都不会影响组件。
首先，这到底是一个好主意，还是应该在组件中直接处理挂载/卸载操作？
第二，如果这是一个很好的方法，我的实现如何？我在JS感觉很舒服，但不是专家
ContentList.js：
import React from 'react'
import './ContentList.css'
import { ContentCardContainer } from '../Conten
浏览 0提问于2020-12-04得票数 1
回答已采纳
我有以下代码(App.tsx)：
import React from 'react';
import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { getAllMovies } from './redux/actions/movie';
import { Movie } from './redux/interfaces/movie';
function App() {
const movies = u
浏览 1提问于2020-05-03得票数 0
回答已采纳
我是新来的，我想使用react本机创建android应用程序，所以在创建项目之后，我安装了redux和redux，并完成了redux想要工作的所有配置。
我创建一个操作文件：
export const GETSURVEYOR = 'GETSURVEYOR';
const URL = "http://192.168.1.6:3000/";
export const fetchSurveyor = () => {
return async dispatch => {
co
浏览 0提问于2020-01-01得票数 0
回答已采纳
我遇到了一个使用useDispatch找不到的函数。据推测，我应该使用react，不幸的是，我的版本是6.0.0，所需的是7.0.0及以上。我想研究一下useDispatch或相关的钩子，以便在一个函数组件中分派一个动作函数。如果我不能升级自己的redux&仍然使用函数组件，我该如何做到这一点？
我的替代方法是使用类组件，但同样，我希望在函数组件中看到这种工作。告诉我还需要什么细节。
这是我的密码。
import React, { useDispatch } from 'react';
import {
Tooltip,
IconButton,
浏览 3提问于2021-01-28得票数 4
回答已采纳
1回答
我有一个在多个组件上调用的函数，我想把它放在一个助手文件中，如下所示： import { useDispatch } from "react-redux";
import { quoteActions } from "../../_actions";
export const nextScreen = () => {
const dispatch = useDispatch();
dispatch(quoteActions.nextStep());
dispatch(quoteActions.disableContinue(true));
}
浏览 9提问于2021-02-02得票数 0
我想将useSelector与useEffect一起使用，因为dispatch(searchEvents(location.search))返回一个promise，并且只有在promise解析后，我才能使用react-redux中的useSelector()挂钩，因为来自useDispatch()的react-redux dispatch将更新我将用来呈现列表的redux存储 const [text, setText] = useState("");
const [priceFilter, setPriceFilter] = useState("");
浏览 51提问于2021-06-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
