Redux 是什麼

阿希發表於2018-04-24
Redux

每當我們談及到 redux，大家都會說是 react 的狀態管理工具。這麼說確實沒錯，畢竟 redux 專案也是 React Community 組織下的一個子專案。而且 redux 的誕生也是和 react 這個 ui 庫急需一個狀態管理解決方案有很大的聯絡。但是 redux 和 react 並沒有任何的耦合。雖然它們經常一起用，但是 redux 的用途並不侷限於 react，或者說，和 react 的結合只是 redux 的使用方式之一。

那麼撇開 react 不談， redux 到底是什麼呢？我們看一下這個例子。

在實際的開發當中，我們可能會碰到這樣的需求：監聽一個事件，當事件觸發的時候，我們可以做一些想做的事情。

const cat = {
  name: 'youtiao',
  age: 1,
  weight: 6
};

// 監聽 'update_weight' 事件
events.on('update_weight', weight => {
  if (weight > cat.weight) {

    // 沒錯，要做的事情就是無情的嘲諷
    console.log('哈哈哈，你又長胖了！！');
    cat.weight = weight;
  }
});

// 觸發 'update_weight' 事件
events.trigger('update_weight', { weight: 8 });

// 檢視改變之後的 cat
console.log(cat);
複製程式碼

開源社群有很多庫可以完成這樣的需求，當然，這裡是講 redux 的，按照劇本走，我們肯定用 redux 來做啦。

const { createStore } = require('redux');

// 監聽事件
const listener = (oldCat, action) => {

  // 註冊 'update_weight' 事件
  if (action.type === 'update_weight') {
    
    // 當新的 weight 大於舊的 weight 時
    if (action.weight > oldCat.weight) {
      console.log('哈哈哈，你又長胖了！！');
      const newCat = Object.assign({}, oldCat, { weight: action.weight });
      return newCat;
    }
  }
  return oldCat;
};

// 繫結監聽事件到 cat 物件上
const store = createStore(listener, cat);

// 觸發 'update_weight' 事件
store.dispatch({ type: 'update_weight', weight: 8 });

// 檢視觸發事件之後的 cat 物件
console.log(store.getState());
// 哈哈哈，你又長胖了！！
// { name: 'youtiao', age: 1, weight: 8 }
複製程式碼

但是！！！redux 是一門很講究的庫，雖然上面的例子跑起來沒有任何問題，但是有一件事情 -- 嘲諷：console.log('哈哈哈，你又長胖了！！')，不應該放在 listener 裡面做。而是應該放到 redux 中介軟體裡去做。至於什麼是 redux 中介軟體和為什麼要這麼麻煩，我覺得可以在後面的文章中再和大家探討一下，同時也歡迎大家在評論區提出自己的意見和建議。

好，看完這個例子，大家知道 redux 是什麼了嗎？emmm，其實我也不知道 redux 是什麼，反正我知道了它可以用來做什麼事情。就像一個扳手?，它創造出來是用來擰螺絲的，也許這是它最擅長的。但是誰說不能用扳手來砸核桃呢，或者當裝飾，甚至當武器也可以呀~

程式碼地址: Redux 是什麼，直接控制檯執行 node ./demo0/index.js 檢視效果

下一篇：Redux 入門 -- 基礎用法

相關文章