摘要：是狀態(tài)容器，提供可預測化的狀態(tài)管理。一般我們會使用一個常量來表示對應的值。作為純函數(shù)，內(nèi)部不建議使用任何有副作用的操作，比如操作外部的變量，任何導致相同輸入但輸出卻不一致的操作。結(jié)合，其他類庫，開發(fā)步驟莫不如此。

Redux 是 JavaScript 狀態(tài)容器， 提供可預測化的狀態(tài)管理。

那什么是可以預測化，我的理解就是根據(jù)一個固定的輸入，必然會得到一個固定的結(jié)果。

redux是專門為react開發(fā)的，但并不是只能用于react,可以用于任何界面庫。

隨著單頁面應用的普及，web app內(nèi)部需要管理的狀態(tài)越來越多，這些狀態(tài)可能來自服務器端，用戶輸入的數(shù)據(jù)，用戶交互數(shù)據(jù)，當前UI狀態(tài)，本地的緩存數(shù)據(jù)等等。如何能夠有條理的管理這些數(shù)據(jù)，成為前端開發(fā)中一個難題。

使用redux的程序，所有的state都存儲在一個單一的數(shù)據(jù)源store內(nèi)部，類似一個巨大的對象樹。

state是只讀的，能改變state的唯一方式是通過觸發(fā)action來修改

為了描述 action 如何改變 state tree ， 你需要編寫 reducers。

reducers是一些純函數(shù)，接口當前state和action。只需要根據(jù)action，返回對應的state。而且必須要有返回。

一個函數(shù)的返回結(jié)果只依賴于它的參數(shù)，并且在執(zhí)行過程里面沒有副作用，我們就把這個函數(shù)叫做純函數(shù)

顧名思義，action就是動作，也就是通過動作來修改state的值。也是修改store的唯一途徑。

action本質(zhì)上就是一個普通js對象，我們約定這個對象必須有一個字段type，來表示我們的動作名稱。一般我們會使用一個常量來表示type對應的值。

此外，我們還會把希望state變成什么樣子的對應的值通過action傳進來，那么這里action可能會類似這樣子的

{
    type: "TOGGLE_TODO",
    index: 5
}

Action 只是描述了有事情發(fā)生了這件事實，但并沒有說明要做哪些改變，這正是reducer需要做的事情。

Reducer作為純函數(shù)，內(nèi)部不建議使用任何有副作用的操作，比如操作外部的變量，任何導致相同輸入但輸出卻不一致的操作。

如果我們的reducer比較多，比較復雜，我們不能把所有的邏輯都放到一個reducer里面去處理，這個時候我們就需要拆分reducer。

幸好，redux提供了一個api就是combineReducers Api。

store是redux應用的唯一數(shù)據(jù)源，我們調(diào)用createStore Api創(chuàng)建store。

第一步搭建開發(fā)環(huán)境，這里不介紹了，參考上一篇文章 手把手教會使用react開發(fā)日歷組件，搭建環(huán)境部分

搭建好環(huán)境切換到目錄下面

npm install redux --save

把index.tsx修改為之下代碼。

import { createStore, combineReducers, applyMiddleware } from "redux"

var simpleReducer = function(state = {}, action) {
  return {
    user: {
      name: "redux"
    }
  }
}

var store = createStore(simpleReducer)

console.log(store.getState())

我們看到控制臺打印出來的一個包含user信息的這么一個對象。

我們使用到了幾個api? createStore創(chuàng)建store，store.getState()獲取store，也就是唯一數(shù)據(jù)源的根節(jié)點。

上文我們也講過，action的情況可能會比較多，redux也提供了combineReducers Api。如果我們有多個reducer,我們就可以使用起來了。

那我們創(chuàng)建多個reducer測試一下，代碼如下：

import { createStore, combineReducers, applyMiddleware } from "redux"

function user(state = {name: "redux"}, action) {
  switch (action.type) {
    case "CHANGE_NAME":
      return {
        ...state,
        name: action.name
      }
  }

  return state
}

function project(state = {name: "min-react"}, action) {
  switch (action.type) {
    case "CHANGE_NAME":
      return {
        ...state,
        name: action.name
      }
  }

  return state
}


var rootReducer = combineReducers({
  user,
  project
})

var store = createStore(rootReducer)

console.log(store.getState())

如我們所預料一樣，我們得到擁有兩個字段的根store。

第一步我們把html改造成這個樣子，新增了一點標簽

    
    
    


    

    更改userName
    

第二步，修改index.tsx，如下

import { createStore, combineReducers, applyMiddleware } from "redux"
import { func } from "prop-types"

function user(state = {name: "redux"}, action) {
  switch (action.type) {
    case "CHANGE_USER_NAME":
      return {
        ...state,
        name: action.name
      }
  }

  return state
}

function project(state = {name: "min-react"}, action) {
  switch (action.type) {
    case "CHANGE_PROJECT_NAME":
      return {
        ...state,
        name: action.name
      }
  }

  return state
}


var rootReducer = combineReducers({
  user,
  project
})

var store = createStore(rootReducer)

function render(state = store.getState()) {
  var $userName = document.getElementById("userName")
  $userName.innerHTML = state.user.name
}

render()

console.log(store.getState())

我們看到頁面正確的顯示了我們user的名稱。下一步我們需要做的就是通過用戶的操作，改變store的值，進而觸發(fā)view的更新。

于是我們新增了這塊代碼：

store.subscribe(function() {
  render()
})

// 綁定用戶事件
var $userNameInput = document.getElementById("userNameInput")
var userNameButton = document.getElementById("userNameButton")
userNameButton.onclick = function() {
  var value = $userNameInput.value
  store.dispatch({
    type: "CHANGE_USER_NAME",
    name: value
  })
}

我們看到保存之后，當我們輸入值之后，點擊更改，頁面的值隨著改變。

但是控制臺報了一個錯誤，TS2339: Property "value" does not exist on type "HTMLElement".,這是由于typescript強類型校驗沒通過導致的。只要加這段代碼就好了

var $userNameInput = document.getElementById("userNameInput") as HTMLInputElement

看到了吧，redux就是這么簡單。

其他所有上層應用，都是在此基礎(chǔ)上開發(fā)的，所以開發(fā)一個redux應用的步驟就是

定義action和與之對應的reducer

監(jiān)聽store的變化，提供回調(diào)函數(shù)

dispatch一個action，等待好運發(fā)生。

結(jié)合react，其他view類庫，開發(fā)步驟莫不如此。

我們也看到了，我們的reducer只能做同步應用，如果我們需要在reducer，做一些延遲操作，可怎么辦

社區(qū)已經(jīng)有成熟的類庫做這件事件

npm install redux-thunk --save

redux本身已經(jīng)提高了很好的擴展機制，就是中間件。這點很類似express的中間件。

//引入新的類庫
import { createStore, combineReducers, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"

...
//store部分做如下修改
const finalCreateStore = compose(applyMiddleware(thunk))(createStore)
const store = finalCreateStore(rootReducer, {})

redux-thunk的作用就是讓dispatch方法不僅僅只接收action對象，還可以包含一個方法。我們可以在這個方法內(nèi)部去調(diào)用異步代碼

我們把dom事件部分做了如下改造

userNameButton.onclick = function() {
  var value = $userNameInput.value
  store.dispatch(function(dispatch, getState) {
    setTimeout(() => {
      dispatch({
        type: "CHANGE_USER_NAME",
        name: value
      })
    }, 2000)

  })
}

可以看到頁面元素確實在2s之后發(fā)生了變化，實際業(yè)務中啊，我們這里可以做一些異步操作。

至于redux原理，以及源碼和中間件的源碼講解可以參照我的另外一篇文章 閱讀redux源碼