redux 中间件 redux-thunk
程序员文章站
2024-03-06 10:35:55
...
什么是中间件? 中间件指的是
redux
的,不是react
的。中间指的是action
跟store
之间,也就是对dispacth
方的封装,最原始的是直接将接受过来的对象直接传递给store
,但是如果传递的是一个函数的话,就不会将这直接传递给store,而是先执行这个函数。
常见的中间有 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
的时候 store
的dispatch
就也可以发送一个函数给store
了,并且会自动执行以下这个函数
import {getInitData} from './store/actionCreator'
componentDidMount(){
store.dispatch( getInitData() )
}
推荐阅读
-
Redux 学习笔记
-
redux以及相关
-
react 渐学(四) redux,redux-thunk, redux-saga, react-redux;
-
redux 中间件 redux-thunk
-
RocketMQ与Kafka对比 【转】 博客分类: KafkaRocketMQ 中间件kafkaRocketMQ
-
RocketMQ与Kafka对比 【转】 博客分类: KafkaRocketMQ 中间件kafkaRocketMQ
-
Springboot整合第三方中间件
-
RabbitMQ消息中间件示例详解
-
RabbitMQ消息中间件示例详解
-
Apache Http Server2.2采用ajp协议配置tomcat7负载均衡 博客分类: 服务器中间件ApacheServerTomcatApacheHttpServer apachetomcat