文檔： Redux中文文檔

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

一、redux和react的關系

Redux并不只為react應用提供狀態(tài)管理， 它還支持其它的框架。

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

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

redux的優(yōu)勢：

集中式存儲和管理應用的狀態(tài)

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

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

數(shù)據(jù)流清晰，易于定位 Bug

二、react多組件共享

抽離所有組件的狀態(tài)，類比 React 組件樹，構造一個中心化的狀態(tài)樹，這棵狀態(tài)樹與 React 組件樹一一對應，相當于對 React 組件樹進行了狀態(tài)化建模： 

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

1.redux可以無視組件層級

2.對于組件系統(tǒng)來說，redux就是一個第三方的，全局的“變量”

三、redux的三個核心概念

核心概念：store、action、reducer  

1、store

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

特點：

• 一個應用只有一個 store
• 維護應用的狀態(tài)，獲取狀態(tài)：store.getState()
• 創(chuàng)建 store 時接收 reducer 作為參數(shù)：const store = createStore(reducer)
• 發(fā)起狀態(tài)更新時，需要分發(fā) action：store.dispatch(action)

import { createStore } from 'redux'
// 創(chuàng)建 store
const store = createStore(reducer)

2、action （動作）

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

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

payload：數(shù)據(jù)屬性，可選。表示本次動作攜帶的數(shù)據(jù)

特點：

• 只描述做什么
• JS 對象，必須帶有 type 屬性，用于區(qū)分動作的類型
• 根據(jù)功能的不同，可以攜帶額外的數(shù)據(jù)，配合該數(shù)據(jù)來完成相應功能

const action1 = { type:'addN', payload: 12 }
// store.dispatch(action1)
 
const action2 = { type:'add', payload: 1 }

3、reducer （純函數(shù)）

作用：

1.初始化狀態(tài)

2.修改狀態(tài)

修改狀態(tài) ：根據(jù)傳入的舊狀態(tài) 和action，返回一個新狀態(tài) 

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

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!

最新評論