解决reudx中的异步问题 applyMiddleware thunk

最新推荐文章于 2024-07-18 10:52:00 发布

敢问

最新推荐文章于 2024-07-18 10:52:00 发布

阅读量402

点赞数

分类专栏： react 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_41040445/article/details/126049906

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Redux中的异步解决方案，包括如何使用`applyMiddleware`添加自定义中间件，以及`redux-thunk`中间件的工作原理。通过示例展示了如何在action中处理异步操作，使得组件能够根据store中的状态变化进行重新渲染。同时，解释了中间件的执行顺序和作用，以及如何通过thunk中间件判断并处理异步action。

摘要由CSDN通过智能技术生成

applyMiddleware

redux中的异步解决方案

component中通过dispatch传递action到store中，store通过middleware处理一些功能（异步功能），传递action到reducer，又会返回新的state到store中，store中的state发生改变会触发subscribe来对component重新渲染

redux整个流程本身事同步的

middleware API 来自于redux。redux/applyMiddleware.md at master · reduxjs/redux · GitHub

引入方式 import {createStore,applyMiddleware} from 'redux'
执行位置 let store = createStore( reducer ,applyMiddleware(test,logger))
参数是自定义中间件
- 中间件函数的写法是固定不变的
- 每个中间件函数内部必须调用next()
- 中间件函数执行的顺序跟在applyMiddleware() 中的参数有关
```
let store = createStore( reducer ,applyMiddleware(test,logger))
```
- 虽然中间件可以拓展redux中的应用程序，可以添加异步代码，但是会造成所有的action都会出现异步功能，这不是想要的结果，中间件只是告诉我们，谁（action）是异步的，谁不是异步的

中间件src/store/middleware/logger.js

// function logger({ getState }) {
//     return next => action => {
//       const returnValue = next(action)
//       return returnValue
//     }
//   }
export function logger(store){
    return function(next){
        return function(action){
            console.log('1111')
            next(action)
        }
    }
}
// 添加异步代码
export function logger(store){
    return function(next){
        return function(action){
            let t = setTimeout(() => {
                console.log('1111')
            },2000)
            next(action)
        }
    }
}

中间件 src/store/middleware/test.js

export function test(store){
    return function(next){
        return function(action){
            console.log('2222')
            next(action)
        }
    }
}

store/index.js

import {createStore,applyMiddleware} from 'redux'
import reducer  from './reducer'
import {logger} from './middleware/logger'
import {test} from './middleware/test'
//1. 定义store
let store = createStore( reducer ,applyMiddleware(test,logger))
export default store

redux-thunk. 中间件解决异步的方法

将异步代码写在 action中，中间件thunk只是告诉我们，谁（action）是异步谁不是

action 返回的是一个函数而不是一个对象

action.js

// 4. 定义action
// let increment = {type:'increment'}
// let decrement = {type:'decrement'}
// export function increment(){
//     return{
//         type:'increment'
//     }
// }
// export function decrement(){
//     return{
//         type:'decrement'
//     }
// }
export  const increment = (num) => ({ type:'increment',payload:num }) // 同步action
// export  const incrementasync = function(num){
//     return function(dispatch){
//         let t = setTimeout(() => {
//             dispatch(increment(num))
//         },2000)
//     }
// }
export  const incrementasync = (num) => (dispatch) => { //异步action
    let t = setTimeout(() => {
        dispatch(increment(num))
    },2000)
}
export  const decrement = (num) => ({ type:'decrement',payload:num })

export  const fngreen = () => ({ type:'fngreen'})
export  const fnred = () => ({ type:'fnred' })

中间件thunk.js

export function thunk(store){
    return function(next){
        return function(action){
            if(typeof action === 'function'){
                action(store.dispatch)
            }else{
                next(action)
            }
        }
    }
}