如何使用24行JavaScript代碼實現Redux

作者：Yazeed Bzadough 譯者：小維FE 原文：freecodecamp 為了保證文章的可讀性，本文采用意譯而非直譯。 90%的規約，10%的庫。 Redux是迄今為止創建的最重要的JavaScript庫之一，靈感來源於以前的藝術比如 "Flux" 和 "Elm" ，Redux通過引入一 ...

作者：Yazeed Bzadough
譯者：小維FE
原文：freecodecamp

為了保證文章的可讀性，本文采用意譯而非直譯。

90%的規約，10%的庫。
Redux是迄今為止創建的最重要的JavaScript庫之一，靈感來源於以前的藝術比如Flux和Elm，Redux通過引入一個包含三個簡單要點的可伸縮體繫結構，使得JavaScript函數式編程成為可能。如果你是初次接觸Redux，可以考慮先閱讀官方文檔。

1. Redux大多是規約

考慮如下這個使用了Redux架構的簡單的計數器應用。如果你想跳過的話可以直接查看Github Repo。

1.1 State存儲在一棵樹中

該應用程式的狀態看起來如下：

const initialState = { count: 0 };

1.2 Action聲明狀態更改

根據Redux規約，我們不直接修改(突變)狀態。

// 在Redux應用中不要做如下操作
state.count = 1;

相反，我們創建在應用中用戶可能用到的所有行為。

const actions = {
  increment: { type: 'INCREMENT' },
  decrement: { type: 'DECREMENT' }
};

1.3 Reducer解釋行為並更新狀態

在最後一個架構部分我們叫做Reduer，其作為一個純函數，它基於以前的狀態和行為返回狀態的新副本。

如果increment被觸發，則增加state.count
如果decrement被觸發，則減少state.count

const countReducer = (state = initialState, action) => {
  switch (action.type) {
    case actions.increment.type:
      return {
        count: state.count + 1
      };

    case actions.decrement.type:
      return {
        count: state.count - 1
      };

    default:
      return state;
  }
};

1.4 目前為止還沒有Redux

你註意到了嗎？到目前為止我們甚至還沒有接觸到Redux庫，我們僅僅只是創建了一些對象和函數，這就是為什麼我稱其為"大多是規約"，90%的Redux應用其實並不需要Redux。

2. 開始實現Redux

要使用這種架構，我們必須要將它放入到一個store當中，我們將僅僅實現一個函數：createStore。使用方式如下：

import { createStore } from 'redux'

const store = createStore(countReducer);

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(actions.increment);
// logs { count: 1 }

store.dispatch(actions.increment);
// logs { count: 2 }

store.dispatch(actions.decrement);
// logs { count: 1 }

下麵這是我們的初始化樣板代碼，我們需要一個監聽器列表listeners和reducer提供的初始化狀態。

const createStore = (yourReducer) => {
    let listeners = [];
    let currentState = yourReducer(undefined, {});
}

無論何時某人訂閱了我們的store，那麼他將會被添加到listeners數組中。這是非常重要的，因為每次當某人在派發(dispatch)一個動作(action)的時候，所有的listeners都需要在此次事件迴圈中被通知到。調用yourReducer函數並傳入一個undefined和一個空對象將會返回一個initialState，這個值也就是我們在調用store.getState()時的返回值。既然說到這裡了，我們就來創建這個方法。

2.1 store.getState()

這個函數用於從store中返回最新的狀態，當用戶每次點擊一個按鈕的時候我們都需要最新的狀態來更新我們的視圖。

const createStore = (yourReducer) => {
    let listeners = [];
    let currentState = yourReducer(undefined, {});
    
    return {
        getState: () => currentState
    };
}

2.2 store.dispatch()

這個函數使用一個action作為其入參，並且將這個action和currentState反饋給yourReducer來獲取一個新的狀態，並且dispatch方法還會通知到每一個訂閱了當前store的監聽者。

const createStore = (yourReducer) => {
  let listeners = [];
  let currentState = yourReducer(undefined, {});

  return {
    getState: () => currentState,
    dispatch: (action) => {
      currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {
        listener();
      });
    }
  };
};

2.3 store.subscribe(listener)

這個方法使得你在當store接收到一個action的時候能夠被通知到，可以在這裡調用store.getState()來獲取最新的狀態並更新UI。

const createStore = (yourReducer) => {
  let listeners = [];
  let currentState = yourReducer(undefined, {});

  return {
    getState: () => currentState,
    dispatch: (action) => {
      currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {
        listener();
      });
    },
    subscribe: (newListener) => {
      listeners.push(newListener);

      const unsubscribe = () => {
        listeners = listeners.filter((l) => l !== newListener);
      };

      return unsubscribe;
    }
  };
};

同時subscribe函數返回了另一個函數unsubscribe，這個函數允許你當不再對store的更新感興趣的時候能夠取消訂閱。

3. 整理代碼

現在我們添加按鈕的邏輯，來看看最後的源代碼：

// 簡化版createStore函數
const createStore = (yourReducer) => {
  let listeners = [];
  let currentState = yourReducer(undefined, {});

  return {
    getState: () => currentState,
    dispatch: (action) => {
      currentState = yourReducer(currentState, action);

      listeners.forEach((listener) => {
        listener();
      });
    },
    subscribe: (newListener) => {
      listeners.push(newListener);

      const unsubscribe = () => {
        listeners = listeners.filter((l) => l !== newListener);
      };

      return unsubscribe;
    }
  };
};

// Redux的架構組成部分
const initialState = { count: 0 };

const actions = {
  increment: { type: 'INCREMENT' },
  decrement: { type: 'DECREMENT' }
};

const countReducer = (state = initialState, action) => {
  switch (action.type) {
    case actions.increment.type:
      return {
        count: state.count + 1
      };

    case actions.decrement.type:
      return {
        count: state.count - 1
      };

    default:
      return state;
  }
};

const store = createStore(countReducer);

// DOM元素
const incrementButton = document.querySelector('.increment');
const decrementButton = document.querySelector('.decrement');

// 給按鈕添加點擊事件
incrementButton.addEventListener('click', () => {
  store.dispatch(actions.increment);
});

decrementButton.addEventListener('click', () => {
  store.dispatch(actions.decrement);
});

// 初始化UI視圖
const counterDisplay = document.querySelector('h1');
counterDisplay.innerHTML = parseInt(initialState.count);

// 派發動作的時候跟新UI
store.subscribe(() => {
  const state = store.getState();

  counterDisplay.innerHTML = parseInt(state.count);
});

我們再次看看最後的視圖效果：