回顧

• 初識react(一) 揭開jsx語法和虛擬DOM面紗
• 初識react(二) 實現一個簡版的html+redux.js的demo
• 初識react(三)在 react中使用redux來實現簡版計數器
• 初識react(四) react中異步解決方案之 redux-saga
• 初識react(五) 數據流終極解決方案 dva(零配置)

前言

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

為什么出現redux

隨著單頁面應用的復雜，多個沒有聯系的組件之間想要共享狀態(state)很困難，Redux的出現解決了數據問題

redux三大原則

單一數據源

• 整個應用的state都被存儲在一個倉庫中，我們稱之為store,整個應用只能有一個store。

只讀的state

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

使用純函數執行修改

• 為每個action用純函數編寫reducer來描述如何修改state

說了這么多，看不懂?沒關系，就是有三個概念 state、reducer、action。下面我們一一講解API

概念解析

1、store 倉庫

• redux提供了一個createStore函數，用來生成store
• store就是保存數據的地方，可以看成一個容器。整個應用只能有一個store

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

2、State 狀態

store對象包含所有數據。如果想得到某個時點數據,就要對Store生成快照。這種時間點的數據集合，就叫做State。 當前時刻的State，可以通過store.getState()拿到。

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

3、action 動作

• action必須是一個對象,type是必須的，用戶可以派發動作來改變state.

let action = {type:"change_title_text",text:"改變標題了" } 復制代碼

4、store.dispatch(action) 派發動作

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

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

5、Reducer 管理員，也可以稱之為處理器

• Store收到派發的動作后即dispatch(action)，必須返回一個新的state，這樣視圖才會變化。
• 這種state的計算過程叫做Reducer，是一個純函數，接受state和action作為參數，返回一個新的state

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

廢話了這么多，很慶幸把基本概念說完了，終于來個實戰來看看具體怎么工作的。我們做一個最簡單計算器，點擊加1，來看看redux怎么工作的

計數器實現步驟(redux)

1、聲明一個初始化狀態

let initState = {number:0} 復制代碼

2、createStore 重點

• 創建倉庫，保存狀態，對外暴露當前狀態=>getState 和如何更改狀態的方法=>dispatch

let createStore=(reducer)=> { //將狀態放到一個盒子里 別人改不了let state ; //聲明狀態function dispatch(action) { //派發 參數是action動作,action是一個對象state= reducer(state,action); //調用寫好的方法,這個方法會返回一個新的狀態}dispatch({}); //內部需要先定義次let getState = ()=> JSON.parse(JSON.stringify(state)); //獲取狀態的方法 深拷貝return {getState,dispatch}; }復制代碼

• 需要知道 action是一個對象=>{type:"add",count:5}，類型為add,每次點擊加5
• 在創建倉庫的時候,會默認先調用,dispatch({})，給state賦值默認狀態
• 對外暴露 getState方法,用戶可以 獲取最新狀態
• 對外暴露 dispatch方法，用戶可以派發動作

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

3、reducer實現

• 管理員，可以根據類型返回不同的狀態

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

好了，到目前為止，我們來梳理下思路

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

4、渲染頁面視圖為初始狀態

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

• 將頁面視圖與store中的state進行綁定?？葱Ч?/li>

目前為止，一切完美，那我們怎么點擊按鈕改變狀態，只能通過store.dispatch()方法

5、點擊改變視圖

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

到目前為止，一個最簡單的redux應用算實現了，其實redux還是比較簡單的，重點是理解它概念，后續會講解在react中如何使用redux

• redux全部源碼解析，可以參考我總結
• 更多優質文章參考

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。