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 入門 -- 基礎用法