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

redux 中间件 redux-thunk

程序员文章站 2024-03-06 10:35:55
...

什么是中间件? 中间件指的是redux的,不是react的。中间指的是actionstore之间,也就是对dispacth方的封装,最原始的是直接将接受过来的对象直接传递给store,但是如果传递的是一个函数的话,就不会将这直接传递给store,而是先执行这个函数。

redux 中间件 redux-thunk

常见的中间有
redux-devtools-extension`redux-thunk,redux-saga,redux-log

一 、redux-thunk

redux-thunk 的引出: 组件中引入过多的异步请求,会使得组件变得异常的臃肿,为了解决这个我问题,redux-thunk 中间件 将异步请求放在action 里面进行实现。

异步函数放在组件的生命周期里面,会使得异步组件更加的难易维护,也很方便自动化测试

1: 安装:
yarn add redux-thunk

redux-thunk 是作用于创建 store的时候

2: 问题:一般我本地开发需要配置redux-devtools-extension,文档有对应的解决办法,参考在线文档地址

// store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer'

// typeof window === 'object' 判断是不是浏览器环境 
const composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }) : compose

const enhancer = composeEnhancers(
   applyMiddleware(thunk)
);

const store  =  createStore( reducer, enhancer )
export default store

3:使用:
普通的 actionCreater 返回的是一个函数,return的是一个对象

export const getHandleInput_action = (value) =>({
        type:CHANGE_INPUT_VALUE,
        value  
})

但是使用redux-thunk的时候return出去的可以是一个函数,函数可以直接接受一个参数dispatch .

  ./store/actionCreator.js

export const getInitData = () =>{
    return (dispatch)=>{
        axios.get('/test.json')
        .then((res)=>{
            let actions = {
                type:'init_state_sync',
                value: res.data.list
            }
            dispatch(actions)
        })
    }
}

使用redux-thunk 的时候 storedispatch就也可以发送一个函数给store了,并且会自动执行以下这个函数

  import {getInitData} from './store/actionCreator'
  componentDidMount(){
       store.dispatch( getInitData() )
    }
相关标签: redux