redux教程之源码解析3applyMiddleware(分析在注释中)
时间:2022-03-12 22:40
applyMiddleware是另一个核心函数 首先我们需要知道如何使用中间件 eg: import { createStore, applyMiddleware } from ‘redux‘ import todos from ‘./reducers‘ function logger({ getState }) { return (next) => (action) => { console.log(‘will dispatch‘, action) // 调用 middleware 链中下一个 middleware 的 dispatch。 let returnValue = next(action) console.log(‘state after dispatch‘, getState()) // 一般会是 action 本身,除非 // 后面的 middleware 修改了它。 return returnValue } } let store = createStore( todos, [ ‘Use Redux‘ ], applyMiddleware(logger) ) store.dispatch({ type: ‘ADD_TODO‘, text: ‘Understand the middleware‘ })
中间件其实就是对reducer就行功能扩展,例如上面的例子,logger即在执行reducer时,输出正在执行的action名字 const a = [()=>{console.log(1)},()=>{console.log(2)},()=>{console.log(3)},()=>{console.log(4)}] undefined const b = a.reduce((a, b) => (...args) => a(b(...args))) undefined b(1) VM8485:1 4 VM8485:1 3 VM8485:1 2 VM8485:1 1 undefined
源码 export default function applyMiddleware(...middlewares) { /**返回一个新的createStore函数 */ return createStore => (...args) => { /**通过传入的reducer和action生成store */ const store = createStore(...args) let dispatch = () => { throw new Error( `Dispatching while constructing your middleware is not allowed. ` + `Other middleware would not be applied to this dispatch.` ) } /**对store和disptch改变成动态的,这样每次传入一个middleware的Store和disptch都是上一个middleware处理过的 */ const middlewareAPI = { getState: store.getState, dispatch: (...args) => dispatch(...args) } const chain = middlewares.map(middleware => middleware(middlewareAPI)) /**链式处理函数,即依次执行middleware数组中的各个中间件 */ dispatch = compose(...chain)(store.dispatch) /**将所有中间件对reducer的扩展加入后,返回store和dispatch */ return { ...store, dispatch } } }
相关推荐
- Android系统编程入门系列之界面Activity交互响应
- 新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- uni-app滚动视图容器(scroll-view)之监听上拉事件
- uniapp h5,app两端复制文本
- Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn
- 诺基亚短信生成!太好玩了
- iOS 跳转App Store进行评分
- 开发一个即时通讯App
- 关闭苹果IOS app自动更新
电脑软件
本类排行
- 1关闭苹果IOS app自动更新
- 2iOS 跳转App Store进行评分
- 3诺基亚短信生成!太好玩了
- 4Android系统编程入门系列之界面Activity响应丝滑的传统动画
- 5uniapp h5,app两端复制文本
- 6uni-app滚动视图容器(scroll-view)之监听上拉事件
- 7新型横向移动工具原理分析、代码分析、优缺点以及检测方案
- 8Android系统编程入门系列之界面Activity交互响应
- 9开发一个即时通讯App
- 10【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn