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

言sir發表於2018-08-27
ReactHTMLReduxJS

回顧

前言

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

為什麼出現redux

隨著單頁面應用的複雜，多個沒有聯絡的元件之間想要共享狀態(state)很困難，Redux的出現解決了資料問題

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

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進行繫結。看效果

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

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

5、點選改變檢視

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

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

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

相關文章