詳解React 和 Redux的關系

Posted on by

文檔： Redux中文文檔

Redux 官方文檔對 Redux 的定義是：一個可預測的 JavaScript 應用狀態管理容器。

一、redux和react的關系

Redux並不隻為react應用提供狀態管理， 它還支持其它的框架。

React 是 DOM 的一個抽象層（UI 庫），並不是 Web 應用的完整解決方案。因此react在涉及到數據的處理以及組件之間的通信時會比較復雜。

對於大型的復雜應用來說，這兩方面恰恰是最關鍵的。因此，隻用 React，寫大型應用比較吃力。

redux的優勢：

集中式存儲和管理應用的狀態

處理組件通訊問題時，無視組件之間的層級關系

簡化大型復雜應用中組件之間的通訊問題

數據流清晰，易於定位 Bug

二、react多組件共享

抽離所有組件的狀態，類比 React 組件樹，構造一個中心化的狀態樹，這棵狀態樹與 React 組件樹一一對應，相當於對 React 組件樹進行瞭狀態化建模： 

 

├── src
   ├── store          # redux目錄，一般約定叫store
   │   ├── index.js   # 定義並導出store. 其中會導入reducer
   │   └── reducer    # reducer函數
   ├── App.js         # 根組件，引入Father 和 Uncle組件

 

1.redux可以無視組件層級

2.對於組件系統來說，redux就是一個第三方的，全局的“變量”

三、redux的三個核心概念

核心概念：store、action、reducer  

1、store

store是一個倉庫，Redux 的核心，整合 action 和 reducer，與vuex的store意義上相似

特點：

  • 一個應用隻有一個 store
  • 維護應用的狀態，獲取狀態：store.getState()
  • 創建 store 時接收 reducer 作為參數：const store = createStore(reducer)
  • 發起狀態更新時，需要分發 action：store.dispatch(action)
import { createStore } from 'redux'
// 創建 store
const store = createStore(reducer)

2、action （動作）

action是一個js對象，他有兩個屬性：

type：標識屬性，值是字符串。多個type用action分開       

payload：數據屬性，可選。表示本次動作攜帶的數據

特點：

  • 隻描述做什麼
  • JS 對象，必須帶有 type 屬性，用於區分動作的類型
  • 根據功能的不同，可以攜帶額外的數據，配合該數據來完成相應功能
const action1 = { type:'addN', payload: 12 }
// store.dispatch(action1)
 
const action2 = { type:'add', payload: 1 }

3、reducer （純函數）

作用：

1.初始化狀態

2.修改狀態

修改狀態 ：根據傳入的舊狀態 和action，返回一個新狀態 

initState = 0
function reducer(state = initState, action) {
  return state
}

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：