使用自定义异步中间件分派Redux Thunk react路由器
自定义异步中间件分派Redux Thunk react路由器是一种在React应用中处理异步操作的技术。下面是对该问答内容的完善和全面的答案：
自定义异步中间件分派Redux Thunk react路由器是指在React应用中使用Redux Thunk和React Router来处理异步操作的一种方法。它结合了Redux Thunk中间件和React Router库，使得在应用中处理异步操作变得更加简单和高效。
Redux Thunk是一个Redux的中间件，它允许我们在Redux中编写异步的action creator。通常情况下，Redux的action creator只能返回一个普通的action对象，而使用Redux Thunk后，我们可以在action creator中返回一个函数，这个函数可以接收dispatch和getState作为参数，并且可以进行异步操作，最终再通过dispatch来分派一个或多个action对象。
React Router是一个用于处理前端路由的库，它可以帮助我们在React应用中实现页面之间的切换和导航。通过React Router，我们可以定义不同的路由规则，并将它们与特定的组件关联起来。当用户在应用中进行导航时，React Router会根据当前的URL路径来渲染相应的组件。
使用自定义异步中间件分派Redux Thunk react路由器的优势在于：
- 简化异步操作：通过Redux Thunk，我们可以将异步操作的逻辑放在action creator中，而不是在组件中。这样可以使组件更加专注于UI的渲染和交互逻辑，而将数据获取和处理的逻辑与组件解耦。
- 统一状态管理：Redux提供了一个全局的状态管理机制，通过Redux Thunk，我们可以在action creator中进行异步操作，并将获取到的数据存储到Redux的store中。这样可以使得应用的状态管理更加一致和可预测。
- 灵活的路由控制：通过React Router，我们可以根据URL路径来渲染相应的组件，从而实现页面之间的切换和导航。这样可以使得应用的路由控制更加灵活和可扩展。
自定义异步中间件分派Redux Thunk react路由器适用于以下场景：
- 异步数据获取：当应用需要从服务器获取数据时，可以使用Redux Thunk来处理异步操作，并将获取到的数据存储到Redux的store中。
- 页面导航和切换：当应用需要实现多个页面之间的导航和切换时，可以使用React Router来管理路由，并根据URL路径来渲染相应的组件。
- 复杂的业务逻辑：当应用的业务逻辑比较复杂时，可以使用Redux Thunk和React Router来处理异步操作和路由控制，使得代码结构更加清晰和可维护。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（云原生）：https://cloud.tencent.com/product/scf 腾讯云函数计算是一种事件驱动的无服务器计算服务，可以帮助开发者在云端运行代码，无需关心服务器的管理和维护。它可以与Redux Thunk和React Router结合使用，实现异步操作和路由控制。
- 腾讯云数据库（数据库）：https://cloud.tencent.com/product/cdb 腾讯云数据库是一种高性能、可扩展的云数据库服务，支持多种数据库引擎。它可以用于存储应用中的数据，与Redux Thunk结合使用，实现数据的获取和存储。
- 腾讯云服务器（服务器运维）：https://cloud.tencent.com/product/cvm 腾讯云服务器是一种弹性计算服务，可以提供可靠的计算能力和网络性能。它可以用于部署和运行应用程序，与React Router结合使用，实现应用的部署和运行。
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和情况进行。
相关·内容
请您更详细地说明以下问题?？1-react redux已经提供了连接(mapStateToProps，mapDispatchToProps)，那么为什么要使用中间件和redux-thunk呢？
了解这个连接函数就足以从存储中获取状态，并从组件中分派事件？
浏览 0提问于2018-05-04得票数 2
回答已采纳
这是我的商店，实现了thunk
store/index.js
import { createStore, applyMiddleware } from "redux";
import reducer from "../reducers/";
import thunk from "redux-thunk";
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
以下是我的行动：
actions/index
export const rem
浏览 0提问于2018-09-13得票数 0
回答已采纳
3回答
作为一个初级的react开发人员，我正在学习redux-thunk中间件，我不明白为什么dos函数(由redux-thunk返回)返回一个promise (由fetch()返回)
我试着不返回任何东西，它起作用了，那么为什么我们要返回它呢？
export function getCourses() {
return fetch(baseUrl)
.then(handleResponse)
.catch(handleError);
}
export function loadCourses() {
return function(dispatch) {
disp
浏览 2提问于2019-08-25得票数 0
1回答
我不明白为什么需要像redux-thunk这样的东西。据我所知，thunk是一个返回函数的函数。在我看来，包装的表达式和中间件的使用似乎更多地混淆了正在发生的事情。摘自redux-thunk的示例代码
import thunk from 'redux-thunk';
// Note: this API requires redux@>=3.1.0
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
// Meet thunks.
// A thunk is a function
浏览 1提问于2017-05-05得票数 35
1回答
我来自一个Angular2世界，那里有一些服务可以进行正常的数据加载等等，现在我正在使用React，Redux应用程序，并试图找出与Redux中的Angular2服务等价的东西( are )。是Redux-thunk吗？
浏览 2提问于2017-02-28得票数 1
1回答
所以我现在是redux的新手，并且还停留在中间件部分。我需要知道这两个代码是如何相互作用的。
我的动作创建者：
import jsonPlaceHolder from '../APis/jsonPlaceHolder';
export const fetchPosts= ()=>{
return async (dispatch)=>{
const response = await jsonPlaceHolder.get('/posts');
dispatch({type:'FETCH_POSTS',
浏览 0提问于2020-01-27得票数 1
2回答
我对Redux及其概念非常陌生，尤其是中间件，所以我为任何愚蠢的错误道歉。
在我的这个项目中，我需要使用redux-thunk。我看过一些关于如何应用它们的指南和解释。然后，我继续收到一个错误“未定义的TypeError:无法读取属性的‘分派’”。我打开了developer工具，并显示了以下错误：
我不知道我做得对不对。下面是我的行为创作者和商店的代码。
行动/index.js
import axios from 'axios';
export function fetchLessons() {
console.log('called!');
浏览 1提问于2016-09-21得票数 2
回答已采纳
我对redux操作有个问题。当我提交一个表单时，下面的错误提示我。网络显示数据已传输。如何修复它？我不知道错误在哪里 我的错误 Error: Actions must be plain objects. Use custom middleware for async actions.
19 | const handleSumbitAddExpenses = (values) => {
20 | console.log(allCategories);
21 | allCategories.forEach(category => {
> 22 |
浏览 14提问于2021-01-06得票数 0
1回答
我的React/Redux应用程序中有一个中间件，如下所示：
export const myMiddleware = (store) => (next) => async (action) => {
switch (action.type) {
case types.SOME_ACTION:
// Some logic here...
break;
}
}
我需要在这里访问状态，以便执行这个中间件设计用来处理的逻辑。
我想，因为存储被传递到中间件中，所以我可以访问它，但是当我检查存储时，我根本看不到状态。我确实看到了一个get
浏览 1提问于2018-07-17得票数 5
回答已采纳
Redux-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
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
回答已采纳
我正在尝试让我的应用程序不会抱怨action没有未定义的类型属性。
我设置了我的客户端渲染，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import routes from './shared/routes';
import rootReducer from './shared/reducers';
import thunk from 'redux-thunk';
import { createStore, applyMidd
浏览 1提问于2016-09-14得票数 1
回答已采纳
这是store.js文件
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import rootReducers from './reducers/index'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
rootReducers, composeWithDevTools(applyMidd
浏览 16提问于2022-05-22得票数 0
我在读Redux我有点困惑于createAsyncThunk
createAsyncThunk 是雷击和createAsyncThunk完全不同的东西是否取代了Thunk?
浏览 19提问于2022-02-16得票数 0
使用效果钩子用于执行诸如react中的网络请求之类的副作用。
redux-thunk中间件也用于执行诸如react中的网络请求之类的副作用。
我很困惑，它们的实际应用是否有什么不同，还是只是一个选择的问题。
浏览 6提问于2021-10-21得票数 1
Redux Thunk和Redux Saga都是Redux的中间件。两者之间的区别是什么，以及如何确定何时使用Redux Thunk或Redux Saga？
浏览 1提问于2018-05-11得票数 26
这个问题已经问了好几次了，但是我并没有真正理解我找到的答案。使用React/Redux，我尝试使用express将异步数据导入到我的初始状态。既然我习惯了d3，我的选择之一就是使用“d3.json”.但如果更好的话我很乐意用别的东西。从先前对同一主题的回答中，我添加了以下代码：
// redux action using a dispatcher (think middleware)
export function cool(url) {
return function(dispatch) {
return d3.json(url, response => {
浏览 3提问于2016-08-11得票数 7
回答已采纳
2回答
我正在尝试找出为什么我无法从redux-thunk接收到本应传递的dispatch()函数。我尝试了几个不同的编码教程，但似乎都不适合我，但我确实注意到有几种不同类型的实现。
所以我的问题很简单，为redux-thunk编写异步函数以确保调度被调用的整体正确方法是什么？
注意:我可以调用操作创建者，但错误: 1)调度不是操作2)操作需要是纯对象
我对我所要求的是redux异步操作的理解。
const getAttributes= () => {
return (dispatch) => {
return (/* Some async stuff */);
}
}
浏览 0提问于2018-04-30得票数 0
我正在尝试使用React在应用程序中测试一些异步代码。
const configureMockStore = require('redux-mock-store').default;
const thunk = require("redux-thunk").default;
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const dummy = () => {
// Mock Ajax call
return new Promis
浏览 1提问于2019-04-22得票数 3
我正在使用redux-thunk中间件构建一个React/Redux应用程序来创建和处理Ajax请求。我有一个特别的thunk，它经常被触发，我想在触发一个新的Ajax请求之前取消任何以前启动的Ajax请求。这个是可能的吗？
浏览 2提问于2016-05-23得票数 17
回答已采纳
2回答
这是redux-thunk库的源代码：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createTh
浏览 3提问于2020-02-09得票数 1
回答已采纳
1回答
我想我在这里缺少一个基本的理解。我知道，为了创建一个操作，从而启动事件的redux链，必须使用dispatch调用操作创建者。
但是，当我们有一个redux-thunk返回一个函数，该函数将在我们的操作创建者上调用dispatch时，为什么还必须用dispatch调用redux-thunk？
例如，以下面的redux-thunk为例：
function savePerson(person: Person) {
return async (dispatch: any) => {
delete person.cars;
let newPerson =
浏览 6提问于2017-05-08得票数 2
回答已采纳
--我需要并行调用两个apis -。这一点很重要，因为我希望将page to load的时间保持在最低限度。
如果我在componentDidMount中调用这两个apis (如下面所示)，那么它是否是异步的。
class Test extends Component{
constructor(args) {
super(args)
this.state = {
...
};
...
}
componentDidMoun
浏览 1提问于2018-07-09得票数 0
回答已采纳
我使用的是，我想提交表单和显示服务器端验证错误，但是它给出了下面的错误：
服务器响应：
下面是LoginForm组件：
import React,{Component} from 'react'
import InputGroup from '../ui/InputGroup';
import { bindActionCreators } from "redux"
import { Field , reduxForm,SubmissionError} from 'redux-form';
import {faE
浏览 0提问于2018-10-26得票数 0
回答已采纳
我将redux-thunk用于异步操作，babel-polyfill用于承诺。我得到以下错误：Error: Actions must be plain objects. Use custom middleware for async actions.
我通过在中间件中包含redux-promise来解决这个问题。我不知道为什么我必须使用redux-promise来解决这个问题，因为Redux中的所有示例都使用babel-polyfill。我是否应该继续使用redux-promise，或者我可能对babel-polyfill有一些问题？
babel-polyfill包含在我的应用程序入口点：
i
浏览 5提问于2016-08-13得票数 6
我一直在挣扎着让自己的头脑清醒下来，因为它真的不知道它有什么伟大的用途。例如，我在一个网站上找到了一个随机的Redux示例：
export const addTodo = ({ title, userId }) => {
return dispatch => {
dispatch(addTodoStarted());
axios
.post(ENDPOINT, {
title,
userId,
completed: false
})
.then(res => {
浏览 0提问于2020-04-23得票数 2
回答已采纳
这些configureStore函数和initialState参数之间有什么区别？
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import rootReducer from '../reduc
浏览 4提问于2017-08-04得票数 0
回答已采纳
1回答
我刚开始学习Redux，我有一个关于它的目的的问题。据我所知，redux-thunk会延迟动作的分派，所以在下面的代码中，它会等到服务器响应才发出。但这不是承诺的工作吗。根据我的基本知识，那么里面的回电应该只在我们得到响应后才能调用，对吗？
export const fetchRentalById = (rentalId) => {
return dispatch => {
axios.get(`/api/v1/rentals/${rentalId}`)
.then((rental) => {
dispatch({
type:
浏览 3提问于2019-12-28得票数 0
回答已采纳
1回答
我正在使用redux-thunk来管理我的反应性应用程序中的异步内容，并且我希望使用redux可观察的方法来更容易地管理复杂的异步流(例如，连接多个Ajax调用)。是否有一种不修改已经完成的操作的方法？
下面是我的一个例子：
const fetchSomeData = () => {
return (dispatch, getState) => {
doAnAjaxCall((err, response) => {
if (err) return dispatch({type: 'ERROR', err})
浏览 0提问于2018-01-29得票数 2
回答已采纳
据我所知，如果我错了，请纠正我，是一个中间件，它帮助我们在操作本身中调度异步函数和调试值，而当我使用时，如果不实现我自己的机制，我就无法创建异步函数，因为操作抛出了一个仅调度纯对象的异常。
这两个包之间的主要区别是什么？在一个react应用中同时使用这两个包有什么好处吗?或者坚持redux-thunk就足够了吗？
浏览 7提问于2016-04-12得票数 98
回答已采纳
1回答
在调度后获取更新的redux状态
、、、、
这是我的reducer.js
const initialState = {
counter: 0
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'increase':
state = { ...state, counter: state.counter + 1 }
break
default:
break
}
retur
浏览 3提问于2021-10-25得票数 1
1回答
我尝试获取数据并将其显示到react组件中，但我在中间件中的fetch调用上有一个无限循环，并且操作似乎没有被调度。我在post组件中没有收到任何结果。 Action.js： import { DATA_LOADED } from './../constants/action-types';
export function getData() {
return {type: DATA_LOADED}
} 中间件： export function asyncMiddleWare({dispatch}) {
return function(next) {
浏览 17提问于2019-09-11得票数 2
回答已采纳
1回答
如何从文件中加载数据？
、、、、
我正在尝试使用redux-thunk从文件中加载数据，请告诉我如何调用load函数，我想从文件中获取数据，这里是我的代码。
const thunk = ReduxThunk.default;
const abc= (state={},action) => {
console.log('in redux', action.type)
switch(action.type){
case 'GET_DATA':
return action
default :
return state;
}
}
const
浏览 5提问于2016-12-28得票数 0
回答已采纳
1回答
好的，我很难理解中间件和redux中的applyMiddleware，以及redux中的routerMiddleware -路由器-redux。有人能用简单的术语向我解释这到底是什么吗？谢谢。
浏览 4提问于2016-07-12得票数 1
回答已采纳
所以，我必须对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
回答已采纳
我正在使用这些包，但当我使用react创建一个新的create-react-app应用程序时，突然在中间件组合上出现了这个错误。我有以下包裹。你能解释一下我在这里缺少什么吗？HELP
也仰慕这份指南
"dependencies": {
"firebase": "^7.4.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
浏览 2提问于2019-11-29得票数 0
如果在StackOverflow上有类似的问题，我很抱歉，但经过3个小时的搜索，我找不到一个。
我正在尝试学习Redux，并通过ReactJS的初学者熟练程度，并具有以下thunk功能：
export const listProducts = () => async (dispatch) => {
try{
dispatch({ type:PRODUCT_LIST_REQUEST })
const { data } = await axios.get('/api/products/')
dispatch({ type:PRODUCT_LIS
浏览 5提问于2021-10-26得票数 1
回答已采纳
使用react-redux而不使用saga或thunk中间件是一种最佳实践吗？
我有一个react-redux应用程序，但它没有任何这些中间件。这是我现在拥有的代码。
import React from 'react';
import ReactDOM from 'react-dom';
import allReducers from './app/reducers/index';
import Header from './app/components/header';
import './index.css'
浏览 1提问于2018-01-09得票数 0
1回答
我通过异步等待使用API调用，这需要定制中间件，我使用Thunk作为自定义中间件。所有依赖项都已安装。而且，不知怎么的，它无法检测到中间件或类似的东西。
我的代码在执行时显示了以下错误：
这是我的操作页面:我使用了异步等待，这导致了这个错误。
import axios from "axios";
export const saveTwitterToken = (token) => {
return ({
type: TWITTER_OAUTH,
payload: token
});
};
export const callTwitterA
浏览 0提问于2019-05-19得票数 0
1回答
我正在学习Redux，在尝试使用redux时遇到了一个问题。我使用Redux作为Chrome扩展，我正在使用构建。下面是我目前的设置：
Index.js:
import {applyMiddleware,createStore} from 'redux';
import combineReducers from './reducers/index';
import {wrapStore} from 'react-chrome-redux';
import thunk from 'redux-thunk';
const middl
浏览 0提问于2017-10-11得票数 0
我正在构建一个web应用程序Reactjs和Redux，在这里您可以登录到仪表板，然后就可以注销了。我使用“”来管理会话，并创建了一个名为logoutUser in userActions.js的操作。此操作是在Dashboard.jsx中导入和调用的，我在其中添加了一个带有onClick事件的注销按钮。我期待的是，当我点击注销时，它应该简单地将我重定向到主页('/')
我的问题是：每当我单击注销按钮时，它都会将我重定向到主页('/')，然后刷新回仪表板。
Console.dev错误：
未明错误:操作必须是普通对象。相反，实际类型是：“未定义”。您可能需要将中间
浏览 2提问于2022-06-16得票数 1
回答已采纳
2回答
在子组件中导入操作和分派
、、、
我如何导入我的操作，而不是在bookmarkVideo中硬编码它，这样我就可以在我的子组件中分派它？
容器：
import {bookmarkVideo} from '../actions/videos';
export default function VideoPlayerScreen(props) {
const dispatch = useDispatch();
...
// import action above instead
const bookmarkVideo = id => {
浏览 10提问于2020-06-05得票数 1
回答已采纳
我正在使用React和Redux构建一个应用程序，以便从API请求并随后显示电影信息。在控制台中，我可以取回请求的数据，但在此之后，我遇到了错误-“错误:操作必须是纯对象。使用自定义中间件进行异步操作。”
到目前为止，这是我的代码。
搜索组件：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchMovie } from &
浏览 4提问于2018-01-21得票数 0
1回答
Redux路由器-“未定义派单”
、、、、
我有一个简单的组件，它在用户加载页面时调用一个操作，在该操作中，我尝试分派另一个操作来设置存储的loggedIn状态为true或false：
import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router'
import $ from 'jquery'
class Login extends Component {
constructor(props) {
super(props)
}
component
浏览 0提问于2016-04-07得票数 13
我的代码是基于组件的，我只想在组件加载时注入还原器，而不是从存储的一开始就将它们堆叠起来。
在react路由器3中，它是非常直接的，但我似乎无法让它与react路由器4一起工作。
这是减速机和商店：
reducers.js
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import modalReducer from '../modules/modal'
export default combineReduc
浏览 18提问于2018-04-23得票数 14
回答已采纳
到目前为止，我已经完成了两个React/Redux项目，第一个使用了我们自己的中间件，最近一个使用了redux-thunk。在第一个过程中，我们使用“常规”操作对象作为异步操作，中间件对此进行了解释。在这种情况下，可以理解的是，我们的操作出现在react本机调试器的操作列表中。
然而，在最近的项目中，我注意到我们的块在调试器中没有显示为操作，这引发了以下问题：
1)这是否正常? 2)如果是，人们是否认为这不是一个问题? 3)其他异步操作库是否也有相同的问题？
浏览 0提问于2018-09-25得票数 1
回答已采纳
我正在使用redux的react。在redux层，我使用thunk。因此组件调用操作，redux操作调用新的层->服务。该服务处理http调用。当响应正常时-我使用thunk提供的分派并返回到reducer。当响应是错误时，我想要重定向用户，但我找不到这样做的方法。我错过了路由器和它的替换方法。
浏览 3提问于2018-03-07得票数 0
1回答
我有我下面的代码，以结合存储和还原剂在反应-还原。
它完美地工作在我以前的应用程序可能是由于反应和反应-redux版本。
但是现在我已经安装了最新版本的getting项目，但是得到了错误。
TypeError:中间件不是一个函数
代码:
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thun
浏览 1提问于2019-03-23得票数 4
回答已采纳
2回答
我来自于使用react-saga的背景，它有“效果”的概念，它允许我们触发动作处理程序来响应被分派的Redux操作：
take('MY_ACTION', myActionHandler)
我要怎么做同样的事呢？
浏览 0提问于2021-07-27得票数 0
回答已采纳
我正在使用react和redux实现异步动作创建者。但是，我得到了以下错误消息:未登录错误:操作必须是普通对象。使用自定义中间件进行异步操作。
我知道动作应该是普通的对象，而像thunk这样的中间件应该在它们不存在的情况下处理这些情况。我读过几本教程，并且查看了的每一个，所以我可以找到关于这个的问题，但是我仍然不知道我哪里出了问题。我是设置错误的设置，还是我用一个不好的行为创作者？这会不会是webpack的错误呢？
下面我已经包含了我认为是相关的代码片段。如果需要更多的信息，请告诉我。
index.js
import React from 'react';
import Rea
浏览 0提问于2018-01-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
