欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react redux无法异步请求的问题(redux中间键 redux-thunk)

程序员文章站 2022-06-22 16:58:00
概述redux 里面 action 是无法进行异步操作的这时我们就需要用到 redux 中间键来增强 action,使其能够执行 异步redux -thunk 官方介绍(英文)redux -thunk 介绍 ------ 来自搜索文章下载 redux-thunkyarn add redux-thunk引入 redux-thunk//store/index.jsimport { createStore,applyMiddleware } from 'redux'; ....

概述

  1. 下载 redux-thunk

yarn add redux-thunk

  1. 引入 redux-thunk
//store/index.js
import { createStore,applyMiddleware } from 'redux';   //⬅⬅⬅⬅⬅⬅
import reducer from "./reducer"
import thunk from 'redux-thunk'      //⬅⬅⬅⬅⬅⬅
const store = createStore(reducer,applyMiddleware(thunk));  //⬅⬅⬅⬅⬅⬅

export default store
  1. 发送异步请求

之前的代码:

    addNewTodo(title){ //actionCreators
        let action = {
            type:ADD_NEW_TODO,
            title
        }
        //需要将action派发给reducer进行处理
        return action
    },

现在的代码:(因为 计时器也是异步的,所以这里使用 计时器来代替异步请求)

//store/actionCreators(action 创建的js 文件)
    addNewTodo(title){
        return dispatch=>{
            setTimeout(() => {
                dispatch({
                    type:ADD_NEW_TODO,
                    title
                })
            }, 1000);
        }
    }

效果展示:

react redux无法异步请求的问题(redux中间键 redux-thunk)

本文地址:https://blog.csdn.net/qq_44163269/article/details/107379272

相关标签: react react