Redux Thunk `([arg(s)]) => dispatch =>`的用途？
Redux Thunk是一个Redux中间件，它允许我们编写异步的action creators。在Redux中，action creators是一个返回action对象的函数，而Thunk允许我们在action creators中编写异步逻辑。
([arg(s)]) => dispatch =>是Thunk的函数签名，它接受一个或多个参数，并返回一个函数，这个函数接受dispatch作为参数。这种函数签名的用途是允许我们在action creators中进行异步操作。
具体来说，当我们使用Redux Thunk时，我们可以在action creators中执行异步操作，例如发送网络请求、访问数据库等。我们可以在这个函数中进行异步操作，然后在异步操作完成后，再通过dispatch来触发相应的action。
使用Redux Thunk的优势在于它简化了异步操作的处理流程。它允许我们在action creators中直接处理异步逻辑，而不需要在组件中编写额外的代码来处理异步操作。这样可以使我们的代码更加清晰和可维护。
Redux Thunk的应用场景包括但不限于：
- 异步请求数据：例如从服务器获取数据并更新Redux store。
- 处理副作用：例如发送请求、处理本地存储、调用浏览器API等。
- 执行复杂的逻辑：例如根据条件触发不同的action。
对于Redux Thunk，腾讯云并没有直接相关的产品或产品介绍链接地址。但是，腾讯云提供了云计算基础设施、云原生解决方案、人工智能等相关产品和服务，可以帮助开发者构建和部署云计算应用。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多相关信息。
相关·内容
3回答
我相对较新的版本。我已经读了很多文章，但我还没有弄清楚使用redux-thunk的真正好处是什么。
我所理解的就是它允许您从action-creators返回一个函数而不是对象？但好处是什么？我创建了很少的小反应项目，而不使用redux-thunk。
让我们考虑下面的片段。两人的行为都是一样的。
如果有人能解释我，或者给我指点正确的资源来获得更好的理解，那将是很有帮助的。
With redux-thunk
export function fetchContacts(){
return function(dispatch){
axios
.get('/cont
浏览 3提问于2018-01-22得票数 3
回答已采纳
2回答
我想弄清楚，Redux和Axios是如何一起工作的，但我只是碰壁了，我需要一些帮助.我的问题是，在操作中有一个调度，但是在我返回调度后，它不再继续。这很可能是我不明白这是如何工作，所以请尽量解释在尽可能多的细节。提前谢谢。
我的combineReducer
import {combineReducers} from "redux";
import getAvailableDatesReducer from "./getAvailableDatesReducer";
export default combineReducers({
availableD
浏览 6提问于2021-04-27得票数 0
我正在构建一个应用程序，使用React，Redux，Redux，Express，以及一个学校项目的后缀。
在我的其他视图中，我获得了数据，以相应地插入和更新我的视图，但在本例中，我得到了未定义的。
我刚从redux转到了redux，所以我提前道歉！
这是我的控制台的截图：
这是我的SingleCountry减速机，还有我的动作创作者和零件.
'use strict';
import axios from 'axios';
// ACTION TYPES
const GET_COUNTRY = 'GET_COUNTRY';
// ACT
浏览 2提问于2017-12-11得票数 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的新手，并且还停留在中间件部分。我需要知道这两个代码是如何相互作用的。
我的动作创建者：
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
我正在尝试用类型记录来检查我的redux-thunk代码。
从Redux：的官方文档中，我们得到了以下示例：
// src/thunks.ts
import { Action } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'
export const thunkSendMessage = (
浏览 6提问于2020-09-14得票数 8
回答已采纳
3回答
所以我有一个Redux操作创建者，它使用redux thunk中间件：
accountDetailsActions.js:
export function updateProduct(product) {
return (dispatch, getState) => {
const { accountDetails } = getState();
dispatch({
type: types.UPDATE_PRODUCT,
stateOfResidence: accountDetails.stateOfResidence,
pro
浏览 5提问于2016-09-19得票数 17
1回答
我最近开始研究redux的部分。据我理解，它应该用于处理异步操作，或者需要从其他操作中分派操作。因此，我已经配置了我的商店，例如：
import {applyMiddleware, createStore} from "redux";
import rootReducer from "./rootReducer";
import thunk from "redux-thunk";
import { composeWithDevTools } from 'redux-devtools-extension'; // used by r
浏览 2提问于2021-12-14得票数 0
我从反流到Redux。在反流中，您的业务逻辑只存在于存储中，但是在"async-action" Redux中，它在"Redux“中似乎是different..for示例，我有，我用"redux-thunk”实现了它。
在一个场景中，我想在我的操作中检查一些东西，如果需要的话，我会向服务器发送请求并获取一些数据。在这种情况下，我必须在我的行动中检查我的逻辑，而实际上我的业务逻辑是存在于行动和存储在一起的，它不是很好。你的解决方案是什么？
例如，我有复选框，我检查一些条件，如果结果为真，我向服务器发送一个请求，这里是我的操作代码，正如您所看到的，我的业务逻辑在我的a
浏览 9提问于2017-05-08得票数 21
回答已采纳
我有一个名为App.js的父组件
...
render() {
return (
<div>
{React.cloneElement(this.props.children, this.props}
</div>
)
}
...
function mapDispatchToProps(dispatch) {
return (
actions: bindActionCreators(actions,
)
}
export default connect(
...,
mapDispatchToProps
浏览 4提问于2017-02-06得票数 15
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-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
我正在为API调用创建带有redux (+thunk+persistant)和axios (+用于刷新令牌的拦截器)的RN应用。
我将我的应用程序逻辑组织为单独的文件，这些文件中的操作与axios API调用相结合(因为这对我来说非常清楚)，并在不同的文件中减少。
问题是刷新令牌应该在操作文件中处理。
例如，简单的动作文件"projects.js"：
import createAuthRefreshInterceptor from 'axios-auth-refresh';
import axios from 'axios';
const r
浏览 2提问于2019-12-29得票数 0
4回答
这是在使用thunk时编写操作的一种方法，这会产生非常简单的还原剂。
getCurrentUserPicture(){
return (dispatch,getState) => {
dispatch({type: "isloading", isLoading: true}); // shows a loading dialog
dispatch({type: "errorMessage"}); // clear errorMessage
dispatch({ty
浏览 2提问于2016-12-01得票数 12
回答已采纳
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回答
我在一个项目中看到，副作用的行为是在这样的操作中定位的：
// ...in ItemListPage.js
function onCreateItem (name, title, content) {
this.props.dispatch(createItem({ name, title, content }));
};
// ...in ItemActions.js
function createItem(post) {
return (dispatch) => {
return callApi('items', 'create
浏览 1提问于2017-07-17得票数 0
回答已采纳
Redux-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
如果在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
回答已采纳
2回答
我试图更好地理解ThunkDispatch函数和TypeScript。得到了使用redux和thunk的代码。
// This is redux-thunk source code
import { Middleware, Action, AnyAction } from "redux";
export interface ThunkDispatch<S, E, A extends Action> {
<T extends A>(action: T): T;
<R>(asyncAction: ThunkAction<R, S,
浏览 2提问于2019-03-20得票数 1
回答已采纳
我正在学习react + redux。我有三个相关的问题。
查询-1：访问组件内存储的方法。根据官方文档，有两种方式
钩子(useSelector等)
连接。
通过导入组件中的存储，我们可以通过store.getState()或store.dispatch()访问存储
有三种方法吗？
查询-2：。我们使用thunk，这样就可以在动作创建者中执行异步操作(例如API调用)。操作创建者可以返回一个函数(而不是一个操作)。下面是一个简单的例子。
const fetchUser = (data) => {
return (dispatch) => {
浏览 6提问于2022-11-15得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
