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

来源:https://www.cnblogs.com/tangshiwei/archive/2019/11/16/11870517.html
-Advertisement-
Play Games

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

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

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

4. 交流

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

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

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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第01講 Android開發系列---Activity
    一. Android系統版本及詳細信息 最新數據 https://developer.android.com/about/dashboards/ 二. Android項目初探 1. 使用android studio創建一個工程 Application Name：“My First App” Comp ...
  • 【前端知識體系】HTML基礎知識強化總結
    HTML是前端頁面佈局中的重要組成部分，如何編寫出符合W3C規範的代碼一直是前端工程師關註的問題。 ...
  • flex招式心法
    flex佈局絕對是我們平常在佈局中用的最多的一個屬性，我們來看看它在can i use中的瀏覽器支持度：（截止到2019/11/16） 挖藕，凹森！支持度居然這麼好，好到連ie也能支持大部分的flex佈局的屬性，那接下來我們就看看它的三大招式吧。 基本概念 任何一個元素，無論塊級元素還是行內元素，都 ...
  • css佈局技巧
    CSS用戶界面樣式 1. 滑鼠樣式currsor ~~~ li{ cursor：pointer； } ~~~ 設置或檢索在對象上移動滑鼠指針採用何種系統預定義的游標形狀 | 屬性值 | 描述 | | | | | default | 預設 | | pointer | 小手 | | move | 移動 ...
  • HTML列表簡單介紹
    1.無序列表 使用標簽：<ul>,<li> 屬性：disc，circle，square 2.有序列表 使用標簽：<ol>，<li> 屬性：A，a，I，i，start 3.嵌套列表 使用標簽：<ul>，<ol>，<li> 4.自定義列表 使用標簽：<dl>，<dt>，<dd> <!--各個標簽使用演示 ...
  • 可保圖片不變形的object-fit
    Object-fit 我們有時候瀏覽一些網站的時候，偶爾會遇到這種情況： 明顯它喵的形變了，尤其是這種這麼業餘的失誤，還是出現在一個專門做圖片的網站上。 產生這種現象的原因是：圖片寫了固定的寬高，這個寬高形成了一個固定的比例，然而圖片本身不可能總是按照你規定的比例上傳上來，只要比例有一點不對，就會產 ...
  • JS中判斷null、undefined與NaN的方法
    1.判斷undefined: var tmp = undefined; if (typeof(tmp) == "undefined"){ console.log("undefined"); } 說明：typeof 返回的是字元串，有六種可能："number"、"string"、"boolean"、" ...
  • 工具sublime安裝
    預設安裝後是英文版 view-show console 安裝packagecontrol https://packagecontrol.io/installation ctrl+`打開控制台，輸入代碼後回車。 安裝後，工具->命令面板或快捷鍵按ctrl+shift+p，打開packagecontro ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類