初識react(二) 實現一個簡版的html+redux.js的demo

回顧

• 初識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

概念解析

一、store 倉庫

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

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

複製代碼

二、State 狀態

store對象包含全部數據。若是想獲得某個時點數據,就要對Store生成快照。這種時間點的數據集合，就叫作State。 當前時刻的State，能夠經過store.getState()拿到。

let state = store.getState()
複製代碼

三、action 動做

• action必須是一個對象,type是必須的，用戶能夠派發動做來改變state.

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

四、store.dispatch(action) 派發動做

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

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

五、Reducer 管理員，也能夠稱之爲處理器

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

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

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

計數器實現步驟(redux)

一、聲明一個初始化狀態

let initState = {number:0}
複製代碼

二、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)。就能夠賦默認值拉，至於爲何，往下看

三、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

四、渲染頁面視圖爲初始狀態

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

• 將頁面視圖與store中的state進行綁定。看效果

目前爲止，一切完美，那咱們怎麼點擊按鈕改變狀態，只能經過store.dispatch()方法

五、點擊改變視圖

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

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

• redux所有源碼解析，能夠參考我總結
• 更多優質文章參考