redux 自定义中间件

一时失言乱红尘 2021-07-24 15:17 527阅读 0赞

每派发一次action,就会执行设置的中间件
    官方记录状态和action的中间件:redux-logger;
    
    1、在store.js中
    	import {createStore,applyMiddleware} from 'redux';
    	
    	const 中间件1=store=>next=>action=>{
    		console.log(action)  当前派发的action
    		let res =next(action)  加载下一个中间件,即中间件2,无异常继续向下执行,中间件可以有返回值
    		console.log(store.getState())  下一个时刻仓库的返回状态
    	}
    	
    	const 中间件2=store=>next=>action=>{
    			...
    			next(action);  执行中间件3
    	}
    	
    		
    	const store=createStore(counter,applyMiddleware(中间件1,中间件2))

![在这里插入图片描述][20200708102244522.png]  
代码示例:

import { createStore,combineReducers,applyMiddleware} from 'redux'
    import { composeWithDevTools} from 'redux-devtools-extension'
    import createSagaMiddleware from 'redux-saga'
    import rootSaga from './saga/sagas'
    
    import { counter} from './reducers'
    
    
    const reducers=combineReducers({ 
        counter
    })
    
    console.log(counter);
    const sagaMiddleware = createSagaMiddleware()
    
    //中间件
    const logger=store=>next=>action=>{ 
        console.log(action)  
        let res =next(action) //加载error
        console.log(res); 
        console.log(store.getState())  
    }
    
    const error=store=>next=>action=>{ 
        try{ 
            next(action);  //加载error2
            console.log('error');
            return 'xx'
        }catch(e){ 
            console.log(e);	
        }
    }
    
    const error2=store=>next=>action=>{ 
        try{ 
            next(action);   
            console.log('error2');
            return 'xxx'
        }catch(e){ 
            console.log(e);	
        }
    }
    
    
    const store=createStore(reducers,composeWithDevTools(applyMiddleware(sagaMiddleware,logger,error,error2)))
    
    sagaMiddleware.run(rootSaga);
    
    console.log(store);
    
    export default store;

[20200708102244522.png]: /images/20210724/3559090376be46f2afa6639675ebf58e.png