Redux入門

繆宇發表於2019-02-18
Redux

本文嘗試解釋Redux是如何運作的。我們將用Redux建立一個小案列。如果你正在找靠譜的Redux文件，可以去看官方文件。

什麼是Redux

來自官方文件的描述：Redux是一個可預測的JavaScript狀態容器。換句話說，Redux就是用來處理和管理應用的狀態/資料。

如下：

Redux diagram

更多圖解 點這裡_

現在我們來一步一步來解答上面的圖代表什麼意思。

State（狀態）

Redux state

任何應用都有一個狀態。有些狀態儲存在資料庫中，有些狀態儲存到不同的地方。在Redux中，狀態存在一個單一的物件中。它知道哪個頁面正開啟著，它知道當前使用者資訊等等。狀態可能是標準化，也可以是規範化的，所以當在不同的瀏覽器開啟時，會渲染出相同的應用（同樣的頁面，同樣的使用者…）

讓我們為計數應用定義我們的狀態：

`var initialState = {counter: 0}`

複製程式碼

render（渲染）

redux-render

Redux和React.js一起用效果很好，但是不用react.js也可以。我們用原生JavaScript來把狀態渲染到頁面：

`<div>-</div>`

複製程式碼
function render(state) {
  document.getElementById(`counter`).textContent = state.counter;
}

複製程式碼

Actions

redux-action

如果應用狀態發生改變，那是因為有Actions觸發了。他們可能是使用者操作，也可能是非同步操作，定時操作扥等等。我們將定義一個按鈕來觸發操作。

`&lt;button id="button"&gt;Increment&lt;/button&gt;`

複製程式碼
`document.getElementById(`button`).addEventListener(`click`, incrementCounter)`

複製程式碼

Store 和 reducer

redux-store

Actions不會馬上改變state。Redux的 store 處理這事：

var store = Redux.createStore(reducer, initialState)

function incrementCounter() {
  store.dispatch({
    type: `INCREMENT`
  })
}

複製程式碼
redux-reducer

store儲存當前的狀態，以及對actions做出反應。當一個action被觸發，傳入當前的state和當前的action到reducer中，reducer返回新的state，state被更新：

function reducer(state, action) {
  if (action.type === `INCREMENT`) {
    state = Object.assign({}, state, {counter: state.counter + 1})
  }
  return state
}

複製程式碼

State 改變

當state改變，重新渲染：

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

複製程式碼

一個React.js渲染器可以很好的處理這件事，只更新改變的部分，而不會去更新全部。

第一次渲染

如果action沒有被觸發就不會渲染，所以我們來觸發第一次渲染：

`render(store.getState())`

複製程式碼

最終程式碼

jsfiddle

// html
<div>-</div>
&lt;button id="button"&gt;Inc&lt;/button&gt;
複製程式碼
// js
var initialState = {counter: 0}
var store = Redux.createStore(reducer, initialState)

function render(state) {
  document.getElementById(`counter`).textContent = state.counter;
}

document.getElementById(`button`).addEventListener(`click`, function() {
  incrementCounter()
})

function incrementCounter() {
  store.dispatch({
    type: `INCREMENT`
  })
}

function reducer(state, action) {
  if (action.type === `INCREMENT`) {
    state = Object.assign({}, state, {counter: state.counter + 1})
  }
  return state
}

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

// 渲染初始化的 state
render(store.getState())
複製程式碼

與MobX比較

在Redux中，你可以控制任何事：actions, action的建立，狀態更新等等。意味著每個應用程式都是可以預測的。但是導致了很多重複的程式碼。另一方面，MobX達到相同的效果，但隱藏了一些使用者觸發的actions，所以你可以寫更少的程式碼。

當然，Redux更加成熟，以及支援一些新特性，比如伺服器端渲染和一些很棒的開發工具。

原文：https://bumbu.github.io/simple-redux/

相關文章