自定義Redux

来源:https://www.cnblogs.com/lufei910/archive/2020/01/16/12201039.html
-Advertisement-
Play Games

實現mini版redux 1. 理解redux模塊 1). redux模塊整體是一個對象模塊 2). 內部包含幾個函數 createStore(reducers) // reducers: function(state, action){ return newState} combineReduce ...


實現mini版redux

1. 理解redux模塊

1). redux模塊整體是一個對象模塊
2). 內部包含幾個函數
    createStore(reducers)  // reducers: function(state, action){ return newState}
    combineReducers(reducers)  // reducers: {reducer1, reducer2}  返回: function(state, action){ return newState}
    applyMiddleware()  // 暫不實現
3). store對象的功能
    getState()  // 返回當前state
    dispatch(action)  // 分發action: 調用reducers()得到新的總state, 執行所有已註冊的監聽函數
    subscibe(listener) // 訂閱監聽: 將監聽函數保存起來
    

2. 實現代碼: src/libs/redux/index.js

/*
創建store對象的函數
 */
export function createStore(reducer) {
  // 內部管理的state
  let state
  // 用來緩存監聽的數組容器
  const listeners = []
  // 初始調用reducer得到初始state值
  state = reducer(state, {type: '@@mini-redux/INIT'})

  /*
  獲取當前狀態
   */
  function getState() {
    return state
  }

  /*
  分發消息
   */
  function dispatch(action) {
    // 調用reducer, 得到新的state
    state = reducer(state, action)
    // 調用監聽緩存中的所有Listener, 通知狀態變化
    listeners.forEach(listener => listener())
  }

  /*
  訂閱監聽
   */
  function subscribe(listener) {
    // 將新的監聽添加到監聽緩存容器中
    listeners.push(listener)
  }

  // 向外暴露store對象
  return {getState, dispatch, subscribe}
}

/*
合併多個reducer的函數
 */
export const combineReducers = (reducers) => {
  // 返回一個reduer聲明函數
  return (state = {}, action) => {
    // 返回包含所有reducer狀態的總state對象
    return Object.keys(reducers).reduce((preState, key) => {
      // 調用對應的reducer函數得到對應的新state, 並保存到總state中
      preState[key] = reducers[key](state[key], action)
      return preState
    }, {})
  }
}

------------恢復內容結束------------


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

-Advertisement-
Play Games
更多相關文章
  • 組件的生命周期 + 概念:在組件創建、到載入到頁面上運行、以及組件被銷毀的過程中,總是伴隨著各種各樣的事件,這些在組件特定時期,觸發的事件,統稱為 組件的生命周期; + 組件生命周期分為三部分: 組件創建階段 :組件創建階段的生命周期函數,有一個顯著的特點:創建階段的生命周期函數,在組件的一輩子中, ...
  • 條件語句:v-if v-else v-else-if v-show v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。 1.v-if <body> <div id="app"> <p v-if="seen">seen=true現在你看到我了</p> <templa ...
  • gulp項目構建 多個開發者共同開發一個項目,每位開發者負責不同的模塊,這就會造成一個完整的項目實際上是由許多的“代碼版段”組成的; 使用less、sass等一些預處理程式,降低CSS的維護成本,最終需要將這些預處理程式進行解析; 合併css、javascript,壓縮html、css、javasc ...
  • 寫此文的緣由:現如今,網路上,沒有同下的解釋形式(或者在外網,所以我沒找到,或者大佬覺得太簡單所以不屑解釋)。然而,我認為這是對VUE+ElementUI的底層框架的理解深入化問題。(為什麼要深入理解底層,來自學習java時留下的習慣,挖底層代碼是常態) 在API文檔中: <el-button @c ...
  • 一個小案例,鞏固有狀態組件和無狀態組件的使用 通過for迴圈生成多個組件 1. 數據: 入口 評論列表組件 使用CSS模塊化 1. 可以在webpack.config.js中為css loader啟用模塊化: 2. 使用 定義全局樣式 webpack中的配置 style樣式 評論項的組件 ...
  • react中的組件組件 react組件介紹 在React中,構造函數,就是一個最基本的組件 如果想要把組件放到頁面中,可以把 構造函數的名稱,當作 組件的名稱,以 HTML標簽形式引入頁面中即可 註意:React在解析所有的標簽的時候,是以標簽的首字母來區分的,如果標簽的首字母是小寫,那麼就按照 普 ...
  • JSX語法 1. 如要要使用 JSX 語法,必須先運行 ,然後再 中添加 語法配置; babelrc配置 webpack中配置 2. JSX語法的本質:還是以 React.createElement 的形式來實現的,並沒有直接把 用戶寫的 HTML代碼,渲染到頁面上; 3. 如果要在 JSX 語法內 ...
  • 實現mini版react redux 1. 理解react redux模塊 1). react redux模塊整體是一個對象模塊 2). 包含2個重要屬性: Provider和connect 3). Provider 值: 組件類 作用: 向所有容器子組件提供全局store對象 使用: 4). co ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...