react-redux中调度函数中的非常奇怪的事情
React-Redux 是一个用于管理状态的 JavaScript 库，它结合了 React 的声明式视图和 Redux 的可预测状态管理。在 React-Redux 中，调度函数（Dispatch Function）是一个用于触发状态变化的函数。
在调度函数中出现奇怪的事情可能有以下几种情况：
- 异步操作：在调度函数中执行异步操作是一种常见的奇怪情况。例如，在调度函数中发起网络请求获取数据，这会导致调度函数的执行顺序变得不确定。为了解决这个问题，可以使用中间件（middleware）来处理异步操作，例如 Redux Thunk 或 Redux Saga。
- 异常处理：如果在调度函数中发生了异常，可能会导致程序的奇怪行为。为了解决这个问题，可以在调度函数中使用 try-catch 块来捕获异常并进行处理，或者在全局错误处理程序中处理异常。
- 无效的操作：有时在调度函数中执行无效的操作可能导致奇怪的行为。例如，在调度函数中修改不可变状态（Immutable State）可能会导致无效的更新。为了解决这个问题，应该遵循 Redux 的设计原则，只能通过纯函数来修改状态。
总结来说，调度函数中出现奇怪的事情可能是由于异步操作、异常处理或无效的操作所导致的。在开发过程中，应该注意处理这些情况，确保调度函数的正常运行，并遵循最佳实践来管理状态。在使用 React-Redux 进行开发时，可以参考腾讯云提供的云开发产品，例如云函数（https://cloud.tencent.com/product/scf）和云数据库（https://cloud.tencent.com/product/tcb），以实现更好的开发和部署体验。
相关·内容
我正在尝试将React组件连接到Action creator，并将操作分派给reducers和渲染数据。我使用Redux作为状态管理。我不确定为什么它不是控制台日志，因为它显示我连接的操作创建器很好。
另外，我想知道你是更愿意使用redux promise作为中间件，还是使用redux thunk？
SearchBar.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { search
浏览 0提问于2018-06-19得票数 0
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
我有很多调用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
回答已采纳
我跟踪一个，并将一个组件包装到一个容器Hello.tsx中。第4行是
import {connect, Dispatch} from 'react-redux';
并在调度中抛出以下错误：
Module '"../../node_modules/@types/react-redux"' has no exported member 'Dispatch'.
如何导入调度？
我需要更新什么吗？npm install没有帮助，即使在更新到最新的npm版本之后也没有帮助。
浏览 0提问于2019-05-13得票数 3
回答已采纳
我目前正在开发一个API调用，它的工作方式与Postman中的预期完全相同，但是当在前端浏览器上进行相同的调用时，它不会返回相同的数据。堆栈是MERN。 其中非常有趣的部分是Axios请求每次都返回不同的数据数组。为了帮助解释这一点，出于测试目的，数据库在进行调用时只返回4条消息。在Postman中，每次都会返回所有4条消息。但是使用React-Redux时，Axios调用有时会返回2条消息，有时会返回3条消息，但永远不会像预期的那样返回完整的4条消息。 编辑:看起来这是一个useEffect问题，我创建了一个按钮，它调用相同的接口请求，并返回所有4条消息。其他人有过这个问题吗？ 下面是AP
浏览 58提问于2021-07-26得票数 0
1回答
嗨，我刚开始使用redux，我不知道为什么FetchUsers()在调度中不能工作，我在App.js中获取的用户总是一个空的array.Should，我使用useDispatch()？还是添加了另一个中间件？
减速器
import {
FETCH_USERS,
FETCH_USERS_SUCCESS,
FETCH_USERS_FAILURE,
} from "../actions/types";
const initialValues = {
loading: false,
users: [],
error: "",
};
co
浏览 4提问于2020-08-07得票数 0
我有一个非常简单的代码，用于在按下+或-按钮时递增和递减。但每当我按下按钮时，我都会收到错误消息。我已经花了大约4个小时来研究它，却找不到原因。我非常确定我没有执行任何异步操作，并且我的操作是返回JavaScript对象 操作代码： export const increment = () => {
return { type: 'INCREMENT' }
}
export const decrement = () => {
return { type: 'DECREMENT' }
} reducer代码： export defau
浏览 48提问于2021-01-02得票数 2
回答已采纳
1回答
我正在React上实现Redux，它目前正在工作，但我不确定它是否正确。我有一个包含3个文件的redux文件夹:操作、还原和存储。
行动有以下代码：
export const SETTER_USER = "SETTER_USER"
export const setterUserAction = ({ email, username, role, lastVideo }) => ({
type: SETTER_USER,
payload: { email, username, role, lastVideo }
})
我从组件调用这个操作，这是组件上的代码：
im
浏览 4提问于2021-04-25得票数 0
回答已采纳
我正在将我的项目从通量转换为剩余。
根组件是非常直接的redux：
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux'
import AppReducer from './AppReducer'
import { createStore } from 'redux'
const store = createStore(AppReducer)
ReactDOM.re
浏览 5提问于2017-10-11得票数 0
我遵循了react教程，下面的模式经常出现在示例代码中：
import { useDispatch} from 'react-redux'
...
const dispatch = useDispatch()
像这样重新声明调度函数的目的是什么？
我查看了react redux代码和(我认为？)钩子工厂返回一个函数。那么，重新声明调度钩子的目的是将其用作函数表达式而不是函数声明以提高性能吗？
为什么useSelector钩子没有这样做呢？
提前感谢
浏览 5提问于2020-08-25得票数 1
回答已采纳
当我使用react("react-redux": "^7.2.2")从服务器获取数据后进行反路径操作，如下所示：
import axios from 'axios';
import store from "../store";
import { getArticle } from "../action/ArticleAction";
import { useDispatch } from 'react-redux';
export function requestWithAction(confi
浏览 3提问于2022-08-05得票数 0
1回答
import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { itemid } from '../actions/action';
class DetailPage extends Component{
componentWillUpdate(){
this.props.dispatch(itemid([this.props.params.item,`${this.props.params.item}${this
浏览 2提问于2016-09-26得票数 3
我想知道今天使用mapDispatchToProps是否还有意义。我正在开发 (构建一个待办事项列表)，其中VisibleTodoList被描述为：
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case
浏览 0提问于2016-05-19得票数 17
回答已采纳
我有一个警告：
React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
使用此代码：
import { useDispatch } from 'react-redux';
import openSocket from "socket.io-client";
import {populateCustomers} from '.
浏览 7提问于2021-03-12得票数 2
回答已采纳
1回答
无全局/单点的反应模式
、、、、
我看到了其他人的一些评论，他们也对使用Flux所提倡的全球调度人员和商店持谨慎态度。我在想，你用过什么替代设计模式？
更新
在更加熟悉了react-redux的工作方式之后，我意识到它根本不涉及全局的单例，而只是在上存储，我认为这是一个非常棒的解决方案。
浏览 1提问于2015-05-10得票数 2
回答已采纳
2回答
我正在试图弄清楚如何处理React/Redux应用程序中的错误，并弄清楚Redux允许由于不可变的状态模式而向后遍历状态连续体。如果post失败，在Redux上遍历时间，同时递增组件的内部重试计数器，并最终调度必要的操作，这是疯狂的想法吗？如何使用react-redux转到以前的状态？
浏览 15提问于2016-07-28得票数 4
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
1回答
我一直在调试这个程序，但毫无头绪，我逐字逐句地遵循教程，试图制作一个TODO应用程序，但我不知道为什么我会收到这个错误消息。
./src/cuers.js
第12行：“分派”未定义为no-undef
第13行：“分派”未定义为no-undef
components.js
import React from 'react'
class Todo extends React.Component {
render() {
const { todo } = this.props
if (todo.isDone) {
浏览 3提问于2017-08-30得票数 3
回答已采纳
我正在尝试使用redux全局传递状态。我想要做的是，在第一个屏幕中，我生成一个randomNumber并将其设置为global state。
然后，我导航到下一个屏幕，当我切换一个按钮时，我会回调global state randomNumber。下面是我的代码：
App.js
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { createDrawerNavigator, createStackNavigator, } f
浏览 1提问于2018-10-15得票数 0
假设我有下面的组件。脚本变得非常大，我想把我的doSomething函数放到另一个脚本中。
但是，只能在React组件中使用调度
import { useSelector, useDispatch } from "react-redux";
import axios from "axios";
import { toggle_progress_bar } from "../../actions/toggle_progress_bar";
import { set_progress } from "../../actions/set_pro
浏览 1提问于2021-07-01得票数 0
这真的很奇怪&很尴尬&我似乎不明白这里出了什么问题。
下面是“智能”组件：
import { connect } from "react-redux";
import TemplateParent from "../component/svg/TemplateParent";
import { setInitialViewBox } from "../modcon/Actions";
const mapStateToProps = ({ svgTemplateState }) => {
return({
浏览 1提问于2017-01-31得票数 0
4回答
正在更新此问题以使用connected-react-router而不是react-router-redux，因为它与react-router v4不兼容。
当调度一个动作时，我似乎不能让我的路由工作。我怀疑这是因为我使用的sagas没有正确配置。
我有一个传奇故事：
import { call } from 'redux-saga/effects'
import { push } from 'connected-react-router'
//...
yield call(push, '/dashboard')
推送功能不会将浏览器重定向到指
浏览 1提问于2018-06-08得票数 3
我正在尝试将表单填写的数据提交给道具。我知道REACT-REDUX，但不知道如何连接基于函数的组件
这是我的代码片段：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
// import { connect } from "react-redux";
export default function TextFields(pr
浏览 8提问于2019-10-21得票数 0
回答已采纳
2回答
我的 组件调度一个操作 ..。我在控制台中看到它到达了动作创建者(文本"ONE!“显示在控制台上)，而不是减速机(文本"TWO!“从未显示)。 出什么问题了？ index.js import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStor
浏览 48提问于2021-02-28得票数 0
回答已采纳
1回答
Redux操作不调用缩减程序
、、、、
这个问题的标题很好地总结了这一点，我正在调用操作，但它似乎不会触发缩减。但首先！一些代码。
index.html：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configurestore from './store/configureStore';
import './index.css';
import App from './App
浏览 10提问于2017-08-24得票数 2
回答已采纳
我正在练习React-Redux。我知道这个问题听起来很简单...但是我想不出怎么解决这个问题。我有一个生成对象的函数。我想将它传递给存储，但我不知道如何在没有用户操作(例如单击按钮)的情况下触发操作。
const MyComponentA = () => (
<BuiltInCompoment propA={data} propB={ FunctionA } />
)
function FunctionA(object) {
...
FunctionB(object.property)
}
函数FunctionB将返回一个对象(或者可能是J
浏览 2提问于2017-02-14得票数 0
看起来我应该能够通过通常命名为mapDispatchToProps的函数将我的分派处理函数映射到连接的组件(在我的示例列表中)的道具上。在我的列表组件中，我很困惑为什么this.pros.a是未定义的？
ListContainer.jsx
const mapStateToProps = state => {
return {
list: state.list
}
}
const mapDispatchToProps = dispatch => {
return {
a: () => {} //simple function just for
浏览 0提问于2017-10-25得票数 1
当我尝试获取数据和componentDidMount时，我会得到这个错误。我如何解决这个问题，它是否是在我的应用程序中获取数据的最佳地方？
不变违规:无法在"Connect(App)“上下文中找到"store”。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect(App)。
import React, { Component } from "react";
import {
Platform,
StatusBar,
StyleSheet,
View,
Ima
浏览 0提问于2019-07-18得票数 0
2回答
我有以下操作创建者，由于某种原因，调度中的代码没有执行，尽管我知道loginSuccess()被调用是因为第一个警报触发了。我做错了什么？
import facebook from '../api/facebook'
import * as types from '../constants/ActionTypes';
export function loginSuccess() {
alert("This alerts fine");
return dispatch => {
alert("This doesn&#
浏览 3提问于2016-08-04得票数 3
回答已采纳
我使用将存储连接到Image组件。我只希望(在Image组件中)从Redux检索一个支柱：“图像”。但我也得到了一个额外的道具：“派遣”。
import { connect } from "react-redux";
import Image from "./Image";
import { imagesSelector } from "units/images/selectors";
const mapStateToProps: MapStateToPropsParam = (state) => ({
images: imagesS
浏览 0提问于2019-08-02得票数 1
回答已采纳
我试图利用thunk对api进行异步调用，但我仍然得到错误:未处理的运行时错误:操作必须是普通对象。使用自定义中间件进行异步操作。
这是我的自定义_app组件：
// to connect redux with react
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';
import { createStore, applyMiddleware } from 'redux';
import reduc
浏览 2提问于2020-08-10得票数 1
我试图在一个特定的测试中模拟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
回答已采纳
我正在学习，在接下来的几个教程中，我看到了以下代码：
import React from 'react';
import TodosView from 'components/TodosView';
import TodosForm from 'components/TodosForm';
import { bindActionCreators } from 'redux';
import * as TodoActions from
浏览 2提问于2016-04-11得票数 13
回答已采纳
我正在使用reactJS创建一个待办事项列表应用程序。如果我在两个单独的文件中编写两种不同的逻辑，它的工作就会很好，但是当将这两个文件组合在一起时，它会产生一个错误。
RenderRemaining.js文件：
import React from 'react';
import { connect } from 'react-redux';
import store from '../store/store';
import RenderRemainingData from './RenderRemainingData';
co
浏览 2提问于2017-12-31得票数 1
回答已采纳
我有单独的文件，在那里我做我的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
回答已采纳
我一直在使用钩子使用react-redux，我就是不明白使用react-redux useDispatch比仅仅使用商店对象的分派函数有什么优势。 在react-redux的请求中，当我将mapDispatch与connect一起使用时，我只是得到了它，这有助于避免将redux嵌套到React组件中。但是现在，使用钩子，很明显组件已经很好地意识到了redux。那么，为什么不直接使用调度函数呢？
浏览 18提问于2019-12-15得票数 5
1回答
我有一个奇怪的问题，我可以看到我的动作创建者被触发鼠标点击，但状态只是“似乎”没有更新。我也没有收到可以帮助我调试的错误消息。
我试图处理的状态的部分非常简单，默认情况下它被设置为false，并且在某些条件下也可以是true。以下是单击后在控制台中的初始呈现时所看到的情况，即应该将“细节”布尔值更改为true：
这里是我的Redux连接组件，称为“旅程”：
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Rou
浏览 1提问于2018-02-05得票数 0
回答已采纳
我正在使用redux工具包来进行redux状态管理。这是显示错误的代码
import * as actions from "../../../_redux/entities/entitiesActions";
import { useDispatch } from "react-redux";
import { strict } from "assert";
const dispatch = useDispatch();
const deleteEntity = () => {
// server request for de
浏览 4提问于2020-09-02得票数 0
我在fetch api中得到了数据：[{name: "s"}]。fetch操作进行得非常好。但是我没有正确地处理组件应用程序中的数据，在这一行，return <p key={index}>{item}</p>.I知道我应该用{item.name}替换{item}。但是我不明白如果我以不正确的方式使用{item}，为什么fetch操作会出错？
这是我的代码。日志结果为[Object]和-------error-----
import React from 'react';
import { render } from 'react-
浏览 30提问于2017-01-23得票数 2
我有一个简单的组件，我正在尝试与redux一起工作。我映射了道具和分派动作，但是只有我最初从商店得到的道具才能正常工作。我将其全部追溯到我的操作:它们正在被分派，但各自的缩减程序实际上并没有做任何事情。根据教程，我想出了非常简单的东西，一切对我来说都很好，但我不能理解这里的问题。 以下是该应用程序的简化版本： // index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Search from './Search'
import { Provider
浏览 45提问于2019-07-30得票数 0
回答已采纳
所以，我必须对REST提出一个异步请求，我读过redux thunk的文章，但是我仍然有点困惑，所以我试图在减速机内部提出一个异步请求。
下面是一个工作示例，它返回普通的json对象
return Object.assign({}, state,
{ texts: state.texts.concat({ data: 'some text'}) })
但是当涉及到网络请求时，它不会产生任何错误，它只是看起来返回不工作，所以这就是为什么我的组件不能更新
axios.get('https://dog.ceo/api/breeds/image/random').t
浏览 1提问于2019-08-25得票数 1
回答已采纳
我似乎不明白为什么我不能更新计数器，即使我发送了正确的操作类型，并且它们处于递增和递减状态。我尝试传递一个mapDispatchToProps并将函数放入该函数中，但仍然得到相同的问题，由于某些原因没有任何东西更新状态。
索引：
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {reducer} from './src/reducers/counter';
const store = createStore(reducer);
co
浏览 1提问于2020-10-26得票数 1
尝试使用组件的<button>中的props来调度已为异步进程设置的redux-thunk函数，但我不太清楚如何同时使用props和函数(通过mapDispatchToProps中的react-redux connect连接到组件)，但我就是想不出如何同时调用props和函数。
function loadData(dispatch, medium) {
console.log(dispatch)
return dispatch({type: 'LOADING_COMPONENT'})
return axios.get(`/professiona
浏览 1提问于2017-12-06得票数 0
我在react中创建了一个新组件
import React, {FC, useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchExternalLinks } from '../../redux/reducers/appReducer'
import { getExternalLinksSelector } from '../../redux/selectors/appSelector'
type L
浏览 4提问于2022-07-22得票数 0
我从Bjarne的书"The C++ Programming Langauge“中读到了有关虚拟函数的内容，并遇到了以下代码片段：
class A {
//...
protected:
int someOtherField;
//...
public:
virtual void print() const;
//...
};
class B : public A {
//...
public:
void print() const;
//...
};
void B::print() const
浏览 4提问于2020-08-24得票数 0
回答已采纳
我通常从react-redux导入{ connect }，以将我的React组件连接到Redux存储。有没有其他方法可以在不使用{connect}的情况下从react组件访问redux存储？
浏览 1提问于2021-03-08得票数 0
我认为Redux对调试非常有用，因为它可以跟踪应用程序在其开发工具中调度的操作。在不打算使用reducer处理的情况下调度操作是不是一种糟糕的做法？
例如，我希望进行一次AJAX调用并根据响应更新本地react组件状态，但仍希望在开发工具中记录此调用以便进行调试。我想创建一个动作创建器，使用react-redux的连接包装器中的react-redux mapDispatchToProps属性将它连接到我的组件，但在我的reducer函数中永远不会有处理这个动作的case。
浏览 2提问于2020-02-25得票数 0
我正在尝试使用react-redux钩子，但是我得到了错误：
TypeError：(0，_reactRedux.useDispatch)不是函数
有什么想法吗？
...
import { useDispatch, useSelector } from "react-redux";
import { StackActions, NavigationActions } from "react-navigation";
import CustomImage from "./CustomImage";
const VideoEpisode = pr
浏览 2提问于2020-03-05得票数 3
回答已采纳
我正在使用React + Flux。我们的团队正计划从flux迁移到redux。来自flux世界的Redux让我非常困惑。在中，流量控制流程很简单，来自Components -> actions -> Store store updates back components。这很简单，也很清楚。
但在redux中它是令人困惑的。这里没有store，是的，有一些没有使用store的例子。我看了几个教程，似乎每个人都有自己的实现风格。有些人在使用容器，有些人没有。(我不知道这个容器的概念，也不能理解mapStateToProps、mapDispatchToProps是做什么的)。
有人
浏览 76提问于2016-07-16得票数 85
回答已采纳
我对react-redux是个新手。在这里，我认为这是一个非常基本的问题。但是，我有一个动作创建者，我正在使用redux thunk。
export const updateActivePage = (activePage) => {
return {
type: UPDATE_ACTIVEPAGE,
payload: activePage
}
}
我尝试的是
export const updateActivePage = (activePage) => (dispatch) => {
return new Promise( function(re
浏览 1提问于2019-04-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
