over 3 years ago

Middleware 官方翻譯文件, 裡面有詳細的 Middleware 模式觀念
https://camsong.github.io/redux-in-chinese/docs/advanced/Middleware.html
其實就是實作 Currying 模式來暫存參數值
http://blog.rx836.tw/blog/javascript-currying/

利用 ES6 箭頭函數實現並觀察 Currying 模式的運作

// 初始化 Currying 函數
const testCurry = a => b => c => {
  return a + b + c;
}

// 檢視初始化的函數物件
console.log(testCurry);
/* log
function testCurry(a) {
      return function (b) {
        return function (c) {
          return a + b + c;
        };
      };
}
*/

// 傳遞第一個參數 a, 保存 a 後並回傳帶參數 b 的函數物件
const testOne = testCurry(1);
// 檢視回傳的函數物件
console.log(testOne);
/* log
function (b) {
     return function (c) {
          return a + b + c;
     };
}
*/
// 傳遞第二個參數 b, 保存 b 並回傳帶參數 c 的函數物件
const testTwo = testOne(2);
// 檢視回傳的函數物件
console.log(testTwo);
/* log
function (c) {
     return a + b + c;
}
*/
// 傳遞第二個參數 c 執行帶參數 c 的函數物件 return a + b + c;
console.log(testTwo(3));
// log 6

// 各種逐步呼叫方式
const testThree = testCurry(1);
console.log(testThree(2)(3));
// log 6
const testFour = testCurry(1)(2);
console.log(testFour(3));
// log 6
console.log(testCurry(1)(2)(3));
// log 6

而 Redux applyMiddleware 就是實踐逐步呼叫方式來執行相關的 Currying 模式物件

建立自訂 Redux Middleware

//官方提供的 Redux Middleware 範本 => 紀錄被觸發的action 及產生新的state
const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

// 使用 redux applyMiddleware 加入自訂 Middleware
let store =  applyMiddleware(thunk, logger)(createStore)(
  combineReducers({
    ...
    ..
  })
);

執行結果

redux-thunk 也是遵循相同的規範所建立的 Redux Middleware

export default function thunkMiddleware({ dispatch, getState }) {
  return next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState);
    }

    return next(action);
  };
}
← React Redux 搭配 reselect 心得 避開 anti-pattern 造成的 re-render →
 
comments powered by Disqus