redux中间件--简单理解

参考链接为:

https://www.rails365.net/movies/redux-ru-men-jiao-cheng-12-zhong-jian-jian

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { Provider } from 'react-redux';
const logger = store => next => action => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;
};
const error = store => next => action => {
try {
next(action)
} catch(e) {
console.log('error ' + e);
}
};
// const logger = function(store) {
// return function(next) {
// return function(action) {
// console.log('dispatching', action);
// let result = next(action);
// console.log('next state', store.getState());
// return result;
// }
// }
// }
const store = createStore(rootReducer, {}, applyMiddleware(logger, error));
// store.subscribe(() => console.log("State updated!", store.getState()));
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();

const counter = (state = 1, action = {}) => {
switch(action.type) {
case 'INCREMENT':
throw new Error('error in INCREMENT')
// return state + 1;
case 'DECREMENT':
return state - 1;
default: return state;
}
}

export default counter;

这是一个“日志和error处理的中间件”
其中“next(action)”是一个走下一个中间建的意思,
Logger的执行顺序是 输出
(1)输出("dispatching",action);
(2)next(action)是执行下一个中间件 就是 error
如下:

const error = store => next => action => {
try {
next(action)
} catch(e) {
console.log('error ' + e);
}
};

执行顺序是 :如果没有错误,则执行下一个中间件
如果有错误,则输出 ("error",e)

当点击“增加+1”按钮的时候,则出发action“ INCREMENT”,
所以会触发一个错误,就是new Error(‘error in INCREMENT’)

则整个页面显示的结果为:
1)(dispatching,INCREMENT)
2)(error,"error in INCREMENT")
3)('next state', store.getState());

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,719评论 0 3
  • 一、什么情况需要redux? 1、用户的使用方式复杂 2、不同身份的用户有不同的使用方式(比如普通用户和管...
    初晨的笔记阅读 2,053评论 0 11
  • http://gaearon.github.io/redux/index.html ,文档在 http://rac...
    jacobbubu阅读 80,052评论 35 198
  • 他说他曾是剧作家,年轻时去过上海,也去过北京。创作出来的那些剧本都被拍成电影或者话剧,荣得奖项。在闲暇时,也写了一...
    a2fdb6f3fbc5阅读 543评论 0 0
  • T (Topic) 有一种东西,请你猜一猜。它可以推动世界的运转(make the world go round)...
    ycongcong阅读 1,734评论 0 0