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>