【react】 redux 公共狀態管理---數據的渲染,數據的修改,再把修改的數據渲染到當前組件


 

核心概念
三大原則
1、單一數據源
   使用redux的程序,所有的state都存儲在一個單一的數據源store內部,類似一個巨大的對象樹。

   state是只讀的
   state是只讀的,能改變state的唯一方式是通過觸發action來修改

2、使用純函數執行修改
   為了描述 action 如何改變 state tree , 你需要編寫 reducers。

   reducers是一些純函數,接口當前state和action。只需要根據action,返回對應的state。而且必須要有返回。

   一個函數的返回結果只依賴於它的參數,並且在執行過程里面沒有副作用,我們就把這個函數叫做純函數

 

 

 

 

首先需要明白,redux中有方法,這些方法是封裝好的

 

 

dispatch 方法是根據動作做派發的過程
getState 方法是返回當前store中的state的數據
subscribe 方法是事件訂閱,參是一個函數,它有一個數值專門存放函數,當執行對應的事件函數,就會遍歷觸發該數組中的函數

 

 

1、store中的state數據渲染到當前組件

 

 

2、對store中的state的數據進行修改

在當前組件,觸發,當前組件引入的store文件中的dispatch(派發器,根據傳入的動作做不的行為事件),reducers.js

 

 

 

 

3、把最新修改的store中的state數據更新到當前,或者說需要更新的組件中去

 

 

 

總體的理解:

 

 

 

目錄結構

 

阮一峰,對

Redux  介紹

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

 

 

 


 

 

Redux的特點

  1. 統一的狀態管理,一個應用中只有一個倉庫(store)
  2. 倉庫中管理了一個狀態樹(statetree)
  3. 倉庫不能直接修改,修改只能通過派發器(dispatch)派發一個動作(action)
  4. 更新state的邏輯封裝到reducer中

 

 

何時使用redux?

簡單說,如果你的UI層非常簡單,沒有很多互動,Redux 就是不必要的,用了反而增加復雜性。

用戶的使用方式非常簡單
用戶之間沒有協作
不需要與服務器大量交互,也沒有使用 WebSocket
視圖層(View)只從單一來源獲取數據

 

 

Redux 的適用場景:多交互、多數據源。

用戶的使用方式復雜
不同身份的用戶有不同的使用方式(比如普通用戶和管理員)
多個用戶之間可以協作
與服務器大量交互,或者使用了WebSocket
View要從多個來源獲取數據

 

 

從組件角度看,如果你的應用有以下場景,可以考慮使用 Redux。

某個組件的狀態,需要共享
某個狀態需要在任何地方都可以拿到
一個組件需要改變全局狀態
一個組件需要改變另一個組件的狀態

 

 

設計思想

Redux 的設計思想很簡單,就兩句話。

 

(1)Web 應用是一個狀態機,視圖與狀態是一一對應的。

(2)所有的狀態,保存在一個對象里面。

.1State

Store對象包含所有數據。如果想得到某個時點的數據,就要對 Store 生成快照。這種時點的數據集合,就叫做 State。

當前時刻的 State,可以通過store.getState()拿到。

Redux 規定, 一個 State 對應一個 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什么樣,反之亦然。

 

 

 

redux中各對象的說明

store

store是一個數據倉庫,一個應用中store是唯一的,它里面封裝了state狀態,當用戶想訪問state的時候,只能通過store.getState來取得state對象,而取得的對象是一個store的快照,這樣就把store對象保護起來。

action

action描述了一個更新state的動作,它是一個對象,其中type屬性是必須有的,它指定了某動作和要修改的值:

{type: UPDATE_TITLE_COLOR, payload: 'green'} 

actionCreator

如果每次派發動作時都寫上長長的action對象不是很方便,而actionCreator就是創建action對象的一個方法,調用這個方法就能返回一個action對象,用於簡化代碼。

dispatch

dispatch是一個方法,它用於派發一個動作action,這是唯一的一個能夠修改state的方法,它內部會調用reducer來調用不同的邏輯基於舊的state來更新出一個新的state。

reducer

reducer是更新state的核心,它里面封裝了更新state的邏輯,reducer由外界提供(封裝業務邏輯,在createStore時傳入),並傳入舊state對象和action,將新值更新到舊的state對象上返回。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM