作者：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);
});

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

原文: https://www.freecodecamp.org/news/redux-in-24-lines-of-code/

4. 交流

本篇主要簡單瞭解下Redux的三個架構組成部分以及如何實現一個簡化版的Redux，對Redux能有進一步的瞭解，希望能和大家相互討論技術，一起交流學習。

文章已同步更新至Github部落格，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！

相關推薦