10分鐘理解 redux
本章的主要內(nèi)容React數(shù)據(jù)傳遞、redux和React-redux等等。
第一節(jié) react數(shù)據(jù)傳遞
react 中組件之間數(shù)據(jù)傳遞
1. 父?jìng)髯?/h1>
2. 子傳父(狀態(tài)提升)
3. 兄弟之間傳遞
需要把數(shù)據(jù)上傳到共有的父級(jí)身上，然后再通過(guò)父級(jí)向下傳，傳到指定的子級(jí)上
本節(jié)作業(yè)
兄弟元素之間數(shù)據(jù)傳遞
兩個(gè)具有共同祖先級(jí)的元素之間數(shù)據(jù)傳遞
第二節(jié) redux
1. 介紹：
Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。Redux 由 Flux 演變而來(lái)，但受 Elm 的啟發(fā)，避開了 Flux 的復(fù)雜性。redux能統(tǒng)一管理數(shù)據(jù)，只要redux中的數(shù)據(jù)發(fā)生改變了，所有使用redux中數(shù)據(jù)的地方都會(huì)改變。redux有自己的一套操作標(biāo)準(zhǔn)。
2. 使用
1. 安裝：
npm install --save redux
使用react時(shí)安裝：
npm install --save react-redux
npm install --save-dev redux-devtools
2. 三大原則
1.單一數(shù)據(jù)源
整個(gè)應(yīng)用的 state 被儲(chǔ)存在一棵 object tree 中，并且這個(gè) object tree 只存在于唯一一個(gè) store 中。
2.使用純函數(shù)來(lái)執(zhí)行修改
如何改變 state tree ，你需要編寫 reducers。它接收先前的 state 和 action，并返回新的 state
3.State 是只讀的
唯一改變 state 的方法就是觸發(fā) action，action 是一個(gè)用于描述已發(fā)生事件的普通對(duì)象。
執(zhí)行上面純函數(shù)。
3. 核心
1. Action
function gaiTel(){
? ?return {
? ? ? ?type:'GAITEL' , // 要辦業(yè)務(wù)類型
? ? ? ?data:'12345678911' , // 新數(shù)據(jù)
? ?}
}
2. Reducer
業(yè)務(wù)流程：
3. Store
1. 調(diào)用業(yè)務(wù)流程，執(zhí)行
store.dispatch(Action)
2. 創(chuàng)建出來(lái)唯一的倉(cāng)庫(kù)
let store = createStore(Reducer)
4. 基本使用：
見：redux1.js
本節(jié)作業(yè)：
理解redux核心
創(chuàng)建一個(gè)redux數(shù)據(jù)
第三節(jié)react-redux
1. 安裝：
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools
Redux-devtools 使用網(wǎng)址：
https://github.com/zalmoxisus/redux-devtools-extension#installation
2. 使用
1. redux 核心代碼都不變
2. 連接react
1. 關(guān)聯(lián)整個(gè)react項(xiàng)目 index.js
2. 某個(gè)組件關(guān)聯(lián)store
3. 頁(yè)面中進(jìn)行讀寫操作
不管是讀還是寫，都是通過(guò) this.props
4. redux中數(shù)據(jù)改變了，但是頁(yè)面不更新
原因：state 是只讀的,不能改變它，改變后頁(yè)面也不會(huì)更新
解決方法：生成一個(gè)新的state
1.使用 {...state}
2. let newobj ={}
?Object.assign(newobj,state)
本節(jié)作業(yè)：
頁(yè)面中使用redux數(shù)據(jù)
頁(yè)面中修改redux中的數(shù)據(jù)
第四節(jié) 其他
1. reducers合并
2. 異步action
1. 下載中間件
npm i --save redux-thunk
2. 配置:
在createStore是配置
import thunkMiddleware from 'redux-thunk'
import { createStore, applyMiddleware } from 'redux'
const store = createStore(rootReducer,applyMiddleware(
thunkMiddleware ?// 允許我們 dispatch() 函數(shù)
)
3.在action中異步請(qǐng)求數(shù)據(jù)
組件中調(diào)用 asyncSetChat
componentDidMount(){
this.props.chatActions.asyncSetChat("http://iwenwiki.com/api/blueberrypai/getIndexChating.php")
}
本節(jié)作業(yè)：
練習(xí)異步操作action
