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

時間 2019-11-16

標籤如何使用 javascript 代碼實現 redux 欄目 JavaScript 简体版

原文原文鏈接

做者：Yazeed Bzadough
譯者：小維FE
原文：freecodecampjavascript

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

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

1. Redux大可能是規約

考慮以下這個使用了Redux架構的簡單的計數器應用。若是你想跳過的話能夠直接查看Github Repo。
github

1.1 State存儲在一棵樹中

該應用程序的狀態看起來以下：編程

const initialState = { count: 0 };

1.2 Action聲明狀態更改

根據Redux規約，咱們不直接修改(突變)狀態。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。app

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/