Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Redux</title>
<script type="text/javascript" src='js/redux.js'></script>
</head>
<body>
<script type="text/javascript">
function reducer(state, action) {
// 首次调用本函数时设置初始 state
state = state || { counter: 0 }; switch (action.type) {
case 'INCREMENT':
console.log('reducer');
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
default:
return state; // 无论如何都返回一个 state
}
} var thunk = (middleApi) => (next) => (action) => {
if(typeof action == 'function'){
console.log(1);
return action(middleApi.dispatch, middleApi.getState);
} console.log(2);
return next(action);
} function middleware1(store) {
return function(next) {
return function(action) {
console.log('middleware1 开始');
next(action);
console.log('middleware1 结束');
};
};
} var inc = () => {
return {type: 'INCREMENT'}
} var incAsy = () => (dispatch) => {
console.log('等待2秒');
setTimeout( ()=>{
dispatch( inc() );
}, 2000);
} function incAsy2(){
return (dispatch, getState)=>{
console.log('等待1秒');
setTimeout( ()=>{
dispatch( incAsy() );
console.log('incAsy2 ');
} ,1000);
}
} /*
Redux.applyMiddleware(thunk, middleware1)
log 如下:
1
等待1秒
1
等待2秒
incAsy2
2
middleware1 开始
reducer
middleware2 开始
*/ /*
Redux.applyMiddleware(middleware1, thunk)
log 如下:
middleware1 开始
1
等待1秒
middleware1 结束 //注意这里触发 dispatch, 又从 middleware1 里面进去了
middleware1 开始
1
等待2秒
middleware1 结束
incAsy2 middleware1 开始
2
reducer
middleware1 结束
*/ var store = Redux.applyMiddleware(thunk, middleware1)(Redux.createStore)(reducer);
store.dispatch( incAsy2() ); </script>
</body>
</html>