回顧

• 初識(shí)react(一) 揭開(kāi)jsx語(yǔ)法和虛擬DOM面紗
• 初識(shí)react(二) 實(shí)現(xiàn)一個(gè)簡(jiǎn)版的html+redux.js的demo
• 初識(shí)react(三)在 react中使用redux來(lái)實(shí)現(xiàn)簡(jiǎn)版計(jì)數(shù)器
• 初識(shí)react(四) react中異步解決方案之 redux-saga
• 初識(shí)react(五) 數(shù)據(jù)流終極解決方案 dva(零配置)

前言

首先糾正個(gè)誤區(qū)，redux可以配合jq等框架使用，并不單單局限于react。為了讓所有人都看懂，我們這里先只實(shí)現(xiàn)一個(gè)最簡(jiǎn)單版本的 html+redux.js的使用。

為什么出現(xiàn)redux

隨著單頁(yè)面應(yīng)用的復(fù)雜，多個(gè)沒(méi)有聯(lián)系的組件之間想要共享狀態(tài)(state)很困難，Redux的出現(xiàn)解決了數(shù)據(jù)問(wèn)題

redux三大原則

單一數(shù)據(jù)源

• 整個(gè)應(yīng)用的state都被存儲(chǔ)在一個(gè)倉(cāng)庫(kù)中，我們稱(chēng)之為store,整個(gè)應(yīng)用只能有一個(gè)store。

只讀的state

• 唯一改變state的方法就是dispatch(action)，即派發(fā)動(dòng)作。

使用純函數(shù)執(zhí)行修改

• 為每個(gè)action用純函數(shù)編寫(xiě)reducer來(lái)描述如何修改state

說(shuō)了這么多，看不懂?沒(méi)關(guān)系，就是有三個(gè)概念 state、reducer、action。下面我們一一講解API

概念解析

1、store 倉(cāng)庫(kù)

• redux提供了一個(gè)createStore函數(shù)，用來(lái)生成store
• store就是保存數(shù)據(jù)的地方，可以看成一個(gè)容器。整個(gè)應(yīng)用只能有一個(gè)store

function createStore(reducer) { //將狀態(tài)放到一個(gè)盒子里 別人改不了... } let store = createStore(reducer)復(fù)制代碼

2、State 狀態(tài)

store對(duì)象包含所有數(shù)據(jù)。如果想得到某個(gè)時(shí)點(diǎn)數(shù)據(jù),就要對(duì)Store生成快照。這種時(shí)間點(diǎn)的數(shù)據(jù)集合，就叫做State。 當(dāng)前時(shí)刻的State，可以通過(guò)store.getState()拿到。

let state = store.getState() 復(fù)制代碼

3、action 動(dòng)作

• action必須是一個(gè)對(duì)象,type是必須的，用戶(hù)可以派發(fā)動(dòng)作來(lái)改變state.

let action = {type:"change_title_text",text:"改變標(biāo)題了" } 復(fù)制代碼

4、store.dispatch(action) 派發(fā)動(dòng)作

• store.dispatch()是發(fā)出action的唯一方法

let store = createStore(reducer); store.dispatch(action) //action=>{type:"change_title_text",text:"改變標(biāo)題了"} 復(fù)制代碼

5、Reducer 管理員，也可以稱(chēng)之為處理器

• Store收到派發(fā)的動(dòng)作后即dispatch(action)，必須返回一個(gè)新的state，這樣視圖才會(huì)變化。
• 這種state的計(jì)算過(guò)程叫做Reducer，是一個(gè)純函數(shù)，接受state和action作為參數(shù)，返回一個(gè)新的state

let reducer = function(state,action){return new_state; } 復(fù)制代碼

廢話(huà)了這么多，很慶幸把基本概念說(shuō)完了，終于來(lái)個(gè)實(shí)戰(zhàn)來(lái)看看具體怎么工作的。我們做一個(gè)最簡(jiǎn)單計(jì)算器，點(diǎn)擊加1，來(lái)看看redux怎么工作的

計(jì)數(shù)器實(shí)現(xiàn)步驟(redux)

1、聲明一個(gè)初始化狀態(tài)

let initState = {number:0} 復(fù)制代碼

2、createStore 重點(diǎn)

• 創(chuàng)建倉(cāng)庫(kù)，保存狀態(tài)，對(duì)外暴露當(dāng)前狀態(tài)=>getState 和如何更改狀態(tài)的方法=>dispatch

let createStore=(reducer)=> { //將狀態(tài)放到一個(gè)盒子里 別人改不了let state ; //聲明狀態(tài)function dispatch(action) { //派發(fā) 參數(shù)是action動(dòng)作,action是一個(gè)對(duì)象state= reducer(state,action); //調(diào)用寫(xiě)好的方法,這個(gè)方法會(huì)返回一個(gè)新的狀態(tài)}dispatch({}); //內(nèi)部需要先定義次let getState = ()=> JSON.parse(JSON.stringify(state)); //獲取狀態(tài)的方法 深拷貝return {getState,dispatch}; }復(fù)制代碼

• 需要知道 action是一個(gè)對(duì)象=>{type:"add",count:5}，類(lèi)型為add,每次點(diǎn)擊加5
• 在創(chuàng)建倉(cāng)庫(kù)的時(shí)候,會(huì)默認(rèn)先調(diào)用,dispatch({})，給state賦值默認(rèn)狀態(tài)
• 對(duì)外暴露 getState方法,用戶(hù)可以 獲取最新?tīng)顟B(tài)
• 對(duì)外暴露 dispatch方法，用戶(hù)可以派發(fā)動(dòng)作

當(dāng)看不懂時(shí),只要知道目的只有一個(gè)，就是在給state賦默認(rèn)值。 先dispatch({})=>reducer(state,action)。就可以賦默認(rèn)值拉，至于為什么，往下看

3、reducer實(shí)現(xiàn)

• 管理員，可以根據(jù)類(lèi)型返回不同的狀態(tài)

let reducer=(state=initState,action)=> { //管理員,負(fù)責(zé)如何更改狀態(tài)的switch (action.type) { //更改狀態(tài) 要有一個(gè)新的狀態(tài)覆蓋掉case "add":return {number:state.number+action.count}}return state; }; 復(fù)制代碼

好了，到目前為止，我們來(lái)梳理下思路

• 我們會(huì)這樣調(diào)用 let store = createStore(reducer),這其中發(fā)生了什么，如何把初始狀態(tài)賦值給state的
• 步驟dispatch({}) =>reducer(initState,action)=>state=initState

4、渲染頁(yè)面視圖為初始狀態(tài)

let store = createStore(reducer); function render() {let content = document.querySelector('.content');content.innerHTML = store.getState().getState().number; } render(); 復(fù)制代碼

• 將頁(yè)面視圖與store中的state進(jìn)行綁定。看效果

目前為止，一切完美，那我們?cè)趺袋c(diǎn)擊按鈕改變狀態(tài)，只能通過(guò)store.dispatch()方法

5、點(diǎn)擊改變視圖

btn.onclick = function () {store.dispatch({type:"add",count:5});render() } 復(fù)制代碼

到目前為止，一個(gè)最簡(jiǎn)單的redux應(yīng)用算實(shí)現(xiàn)了，其實(shí)redux還是比較簡(jiǎn)單的，重點(diǎn)是理解它概念，后續(xù)會(huì)講解在react中如何使用redux

• redux全部源碼解析，可以參考我總結(jié)
• 更多優(yōu)質(zhì)文章參考

總結(jié)

以上是生活随笔為你收集整理的初识react(二) 实现一个简版的html+redux.js的demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。