Redux基礎使用

Redux

核心

Redux 介紹

javascript 狀態容器，提供可預測化的狀態管理

文章配圖

什麼是狀態

分頁當前頁數狀態

彈出框隱藏或者顯示狀態

什麼是狀態容器

狀態容器就是一個JavaScript物件

把頁面中這些狀態轉換成資料儲存在一個JavaScript物件中，這個JavaScript物件就是狀態容器

狀態容器的好處

把dom和狀態交由框架來處理，不需要操作dom元素，直接操作dom元素對應的狀態物件就可以了

使用redux的好處

科學化的狀態管理方式，使狀態管理變得容易

透過科學的狀態管理，當這個狀態發生變化的時候，狀態變得可預測，狀態發生問題可以很方便的定位問題出現在哪裡

Redux 核心概念及工作流程

文章配圖

Store：儲存狀態的容器，JavaScript物件

View：檢視，html頁面

Actions：物件，描述對狀態進行怎樣的操作

固定屬性type 值由開發人員自定義

Reducers：函式，操作狀態並返回新的狀態

工作流程

由於所有狀態都儲存在Store中，檢視不能直接操作狀態

檢視想要修改Store中的狀態，必須先透過dispatch方法觸發一個Actions描述當前進行什麼操作，這個Actions 會被 Reducer 接收到，Reducer根據 Actions的type值的不同對狀態進行不同處理，當Reducer處理完成後，透過返回值的方式返回給Store以更新更新Store中的狀態，當Store中狀態更新以後，透過subscribe同步檢視中的狀態

透過使用計數器案例學習 Redux

實現效果

利用 Redux 實現上面的計數器功能，點選+按鈕數值+1 點選-按鈕數值減1；

新建html 引入 redux。js

<！DOCTYPE html> Document

建立 store 物件

function reducer（） { return { count： 0 }}// 1。建立 store 物件const store = Redux。createStore（reducer）// 列印 store 物件console。log（store）/*dispatch： dispatch（action）getState： getState（）replaceReducer： replaceReducer（nextReducer）subscribe： subscribe（listener）Symbol（observable）： observable（）*/

改造reducer 方法儲存預設狀

var initialState = { count： 0}// 2。建立 reducer 函式function reducer（state = initialState） { return state}

定義改變資料的 actions ，並在reducer 函式中對對應的 action 做出不同操作

var increment = { type： ‘increment’}var decrement = { type： ‘decrement’}// 第二個引數為操作的 actions function reducer（state = initialState， action） { console。log（action） switch （action。type） { case ‘increment’： return { count： state。count + 1 } case ‘decrement’： return { count： state。count - 1 } default： return state }}

獲取按鈕新增點選事件，觸發相應action

document。querySelector（“#plus”）。addEventListener（‘click’，（） => { store。dispatch（increment）}）document。querySelector（“#minus”）。addEventListener（‘click’，（） => { store。dispatch（decrement）}）

訂閱store，更新狀態到頁面上

store。subscribe（（） => { // 獲取 store 物件中的資料 document。querySelector（‘#count’）。innerHTML = store。getState（）。count}）

Redux 核心api

createStore：建立 Store 狀態容器

const store = Redux。createStore（reducer）

reducer：建立用於處理狀態的 reducer 函式

function reducer （state = initialState， action） {}

getState：獲取狀態

store。getState（）

subscribe：訂閱狀態

store。subscribe（function （） {}）

subscribe：觸發Action