Redux概念之二: Redux的三大原則

dingda 發布于2019-08-20 13:59 / 743人閱讀

摘要：就是應用程序領域的狀態，它是類型中的模型的設計的概念，這設計是由架構而來的，在原本的架構中是允許多個的結構，簡化為只有單一個。的設計中是與中的相比，它們之間有一些類似的設計。

Redux里的強硬規則與設計不少，大部份都會與FP(函數式程序開發)、改進原本的Flux架構設計有關。Redux官網文檔上的三大基本原則，主要是因為有可能怕初學者不理解Redux中的一些限制或設計，所以先寫出來說明，這里面也說明了Redux的設計原理基礎是如何，所以強烈建議所有的初學者一定要徹底地理解這三大原則中的意義，多看幾遍，對日后的學習會很有幫助。以下分別說明，主要以原文的標題與內容說明，盡可以說明的比較清楚些。

單一真相來源

你的整個應用中的state(狀態)，會存儲在單一個store(存儲)之中的一個對象樹狀結構里。

Redux中只有用單一個對象大樹結構來的存儲整個應用的狀態，也就是整個應用中會用到的數據，稱之為store(存儲)。但要注意的是store(存儲)并不是只有單純的數據而已。store就是應用程序領域的狀態，它是類型MVC中的Model(模型的)設計的概念，這設計是由Flux架構而來的，在原本的Flux架構中是允許多個store的結構，Redux簡化為只有單一個。

Redux的單一個store的設計有一些好處，對開發者來說，它可以容易調試與觀察狀態的變化，狀態存儲于對象樹狀結構中，也很容易作到重作/復原(Undo/Redo)的功能。因為只有一個store，但如果store里要儲放多個不同的狀態對象，以及每次的更動數據，自然就會變成了對象樹狀結構(object tree)。

此外，如果你想要從store中取出目前的狀態數據，可以用store的getState()方法。

狀態是唯讀的

唯一能更動狀態的是發送一個action(動作)，action是一個描述"發生了什么事"的純對象

這里指的"狀態"，是上面說的儲放在store中的狀態數據，你"不能直接"對其中的狀態數據更動，只能"間接"地作這事。這與原先的React中的state與setState的概念有點像，Redux的意思是你不能直接更動store里面所記錄的狀態值，只能"間接"地透過發送action對象來叫store更動狀態。"間接"地更動狀態是一個很關鍵的設計，這是Flux中單向數據流的重點之一，這對于每個動作發生，最終會影響到什么狀態上的更動，一個接一個的順序等等的一種嚴格的設計。

你可能會認為"狀態既然是唯讀"，直接與間接有什么差異，"唯讀"不就代表完全不能更動，這語句是不是有誤？

"唯讀"當然就是完全不能更動的意思沒錯，所以狀態對象的更動是并不是在原先的狀態對象上變動它，而是由原先狀態對象因為動作的加入后，產生一個全新的狀態對象，用這全新的狀態對象來取代原先的狀態對象而已。這在真實世界中或許很難拿比喻來說明，但在軟體世界中這很可以很容易達成。

"發生了什么事"這句，是代表每個action都會有一個type(類型)，代表這個動作是要作什么用的，或是現在是發生了什么，例如是要新建一筆什么數據，或是刪除整個數據等等，動作對象除了要說明它是要作什么之外，也需要包含所影響的數據。

發送一個action(動作)，使用的是store.dispatch(action)語法樣式，下面這個例子就是一個要更動狀態的代碼:

store.dispatch({
  type: "COMPLETE_TODO",
  index: 1
})

中間的那個純對象，就叫作action(動作)，它是一個單純用于描述發生了什么事與相關數據的純對象:

{
  type: "COMPLETE_TODO",
  index: 1
}

還記得我們在React中的state與setState方法的設計嗎？state也是不能直接更動的，一定要透過setState方法才能更動它。那這是為什么呢？因為setState不光只是更動state值，它還要作重新渲染的動作，React需要比對目前的狀態，與即將要變動的狀態，這樣才能進移動新渲染的工作。Redux的設計中store是與React中的state相比，它們之間有一些類似的設計。

更動只能由純函數來進行

要指示狀態樹要如何依actions(動作)來作改變，你需要撰寫純粹的歸納函數(reducers)

Redux中的reducer的原型會長得像下面這樣，你可以把它當作就是 之前的狀態 + 動作 = 新的狀態 的公式:

(previousState, action) => newState

注: 你可以參考Redux中Reducers這一章的內容，里面有實例。

不過，Redux中的reducer一定是純函數(pure function)，也就是不能有副作用的函數。因此由reducer所產生的新狀態，并不是直接修改之前的狀態而來，而是一個復制之前狀態，然后加上動作改變的部份，產生的一個新的對象，它這樣設計是有原因的。

Redux的store設計，并不是原本Flux架構中的store，而是ReduceStore，這個ReduceStore是一個在Flux中的store進化版本，在說明中它有一個叫作reduce的方法，說明如下:

reduce(state: T, action: Object): T 歸納(Reduces)目前的state(狀態)與一個action(動作)到新的store中的state(狀態)。所有的子類都需要實作這個方法。這個方法必須是純粹而是無副作用。

那為何要用這個進化的ReduceStore？它最后有說明一段:

不需要發送更動事件注意所有繼承自ReduceStore的store，不需要手動發送在reduce()中的更動事件...state(狀態)會自動地比對在每個dispatch(發送)之前與之后，與自動地作發送更動事件...

ReduceStore的設計與Redux最一開始的版本差不多是同時間發布的，在開發者之間彼此有交流。Redux的store運用了類似于ReduceStore的設計，所以要更動Redux中的store，需要透過reducer，這是為了簡化原本在Flux數據流的實作流程。

reducer在Redux中扮演了十分重要的關鍵角色，它是一種對store中所存放的狀態，要如何因應不同的動作而進行刷新的函數，而store也是由reducer所創建，例如像下面的代碼:

// @Reducer
//
// action payload = action.text
// 使用純粹函數的數組unshift，不能有副作用
// state(狀態)一開始的值是空數組`state=[]`
function todoApp(state = [], action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [action.text, ...state]
    default:
      return state
  }
}

// @Store
//
// 由reducer創建store
const store = createStore(todoApp)

針對應用中不同功能的狀態，可以分別寫出不同的reducer，Redux中提供了combineReducers函數可以合并多個reducer，例如以下的代碼:

function todos(state = [], action) {
  switch (action.type) {
    case "ADD_TODO":
      return state.concat([ action.text ])
    default:
      return state
  }
}

function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

// rootReducer是個組合過的函數，
// 這里用的是對象屬性初始設置簡寫法，
// combineReducers傳參是一個對象
const rootReducer = combineReducers({
  todos,
  counter
})

GPU云服務器云服務器 Redux redux源碼 redux-saga react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81350.html

Redux 入門

摘要：系列文章入門本文進階番外篇狀態管理，第一次聽到這個詞要追溯到去年年底。只讀的唯一改變的方法就是觸發，是一個用于描述已發生事件的普通對象。沒有特殊情況沒有副作用，沒有請求沒有變量修改，只進行單純執行計算。系列文章: Redux 入門(本文) Redux 進階番外篇: Vuex — The core of Vue application 狀態管理，第一次聽到這個詞要追溯到去年年...

shusen 2019-08-19 18:46 評論0 收藏0
解密Redux: 從源碼開始

摘要：接下來筆者就從源碼中探尋是如何實現的。其實很簡單，可以簡單理解為一個約束了特定規則并且包括了一些特殊概念的的發布訂閱器。新舊中存在的任何都將收到先前的狀態。這有效地使用來自舊狀態樹的任何相關數據填充新狀態樹。 Redux是當今比較流行的狀態管理庫，它不依賴于任何的框架，并且配合著react-redux的使用，Redux在很多公司的React項目中起到了舉足輕重的作用。接下來筆者就從源碼...

remcarpediem 2019-08-23 18:40 評論0 收藏0
Redux 入門

摘要：只要是同樣的輸入，必定得到同樣的輸出。純函數是函數式編程的概念，必須遵守以下一些約束。中的概念執行的動作，包括動作所需要的數據，改變數據的唯一來源，一般是通過將傳到。只是描述了有事情發生了這一事實，并沒有指明應用如何更新。 1.什么是Redux 管理Web應用全局狀態的框架。單頁面應用，顧名思義，和傳統項目的最明顯區別就是項目只有一個頁面，頁面有一個根元素，我們寫的每一個頁面是一個大...

miracledan 2019-08-20 11:58 評論0 收藏0
React-redux基礎

摘要：簡介創建的函數，返回一個對象，包含等方法合并多個中間件處理，在實際的前調用一系列中間件，類似于綁定和函數式編程中常見的方法，介紹官方提供的綁定庫。前言在學習了React之后，緊跟著而來的就是Redux了~ 在系統性的學習一個東西的時候，了解其背景、設計以及解決了什么問題都是非常必要的。接下來記錄的是，我個人在學習Redux時的一些雜七雜八~ Redux是什么通俗理解 h...

jsyzchen 2019-08-23 15:09 評論0 收藏0
Redux技術架構簡介

摘要：是一個程序架構，源于提出的一種架構，然而，它不僅可以應用于，還可以應用于其他任何框架中。有以下職責維持應用的提供方法獲取提供方法更新通過注冊監聽器通過返回的函數注銷監聽器。同時，的返回值實際上是一個函數可以解除監聽。 Redux是一個程序架構，源于Flux（Facebook提出的一種架構），然而，它不僅可以應用于React，還可以應用于其他任何框架中。值得一提的是，Redux的源代碼很...

weizx 2019-08-22 17:05 評論0 收藏0