文檔： Redux中文文檔

Redux 官方文檔對(duì) Redux 的定義是：一個(gè)可預(yù)測的 JavaScript 應(yīng)用狀態(tài)管理容器。

一、redux和react的關(guān)系

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

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

對(duì)于大型的復(fù)雜應(yīng)用來說，這兩方面恰恰是最關(guān)鍵的。因此，只用 React，寫大型應(yīng)用比較吃力。

redux的優(yōu)勢：

集中式存儲(chǔ)和管理應(yīng)用的狀態(tài)

處理組件通訊問題時(shí)，無視組件之間的層級(jí)關(guān)系

簡化大型復(fù)雜應(yīng)用中組件之間的通訊問題

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

二、react多組件共享

抽離所有組件的狀態(tài)，類比 React 組件樹，構(gòu)造一個(gè)中心化的狀態(tài)樹，這棵狀態(tài)樹與 React 組件樹一一對(duì)應(yīng)，相當(dāng)于對(duì) React 組件樹進(jìn)行了狀態(tài)化建模： 

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

1.redux可以無視組件層級(jí)

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

三、redux的三個(gè)核心概念

核心概念：store、action、reducer  

1、store

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

特點(diǎn)：

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

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

2、action （動(dòng)作）

action是一個(gè)js對(duì)象，他有兩個(gè)屬性：

type：標(biāo)識(shí)屬性，值是字符串。多個(gè)type用action分開       

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

特點(diǎn)：

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

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，返回一個(gè)新狀態(tài) 

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

總結(jié)

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

最新評(píng)論