react開發教程（九）redux基礎

Readux基礎

什麼是redux？

簡單點回答就是，一個管理數據的全局對象，可是它有單一狀態樹的概念，所謂的單一狀態樹，就是指「全部的 state都以一個對象樹的形式儲存在一個單一的 store 中。」

頁面中的全部狀態或者數據，都應該用這種狀態樹的形式來描述；頁面上的任何變化，都應該先去改變這個狀態樹，而後再經過某種方式實現到頁面上。

或者換句話說，咱們要作的核心工做，就是用單個對象去描述頁面的狀態，而後經過改變這個對象來操控頁面。

使用場景

不管是移動端仍是 pc 端，當你使用 React 或者 vue 開發組件化的 SPA 程序時組件之間共享數據（狀態）共享自己就是一個問題，既然是共享的那麼就沒有必要在每一個組件中都從新獲取，所以每一個系統都須要一個管理多組件使用的公共信息的功能，這就是 Redux 的做用。

核心概念

Action：是把數據從應用傳到 store 的有效載荷，通俗一點就是描述一個動做
好比：
你的女友給你發了個消息，消息的內容就是，"快去給我清空購物車"， 那麼這個內容在redux中就是action的意思

Reducer：Action 只是描述了有事情發生了這一事實，並無指明應用如何更新 state。而這正是 reducer 要作的事情。 通常稱其爲規則
好比：
你女友已經給你發完消息了，可是隻是一個消息，你是執行者，你是怎麼執行的他不關心，那麼你執行的這個過程就是reducer，爲何叫規則那，由於你執行的這個過程本就是規則，你先得有錢，而後登陸他的賬號，而後結算

Store：Store 就是把 Reducer 和 action 聯繫到一塊兒的對象。
Store 有如下職責：
維持應用的 state；
提供 getState() 方法獲取 state；
提供 dispatch(action) 方法更新 state；
經過 subscribe(listener) 註冊監聽器；

安裝

若是單純使用 Redux 僅僅安裝 Redux 便可，執行npm install redux --save，不過在 React 中使用 Redux 確定會用到 react-redux 這一工具，所以這裏一塊兒安裝完，執行npm install react-redux --save。

案例代碼

// 定義計算規則，即 reducer
function BoyFriend(state = {
  cart: '10個商品價值100000000',
  relationship: '戀人'
}, action) {
  switch (action.type) {
    case 'JIEZHANG':
      state.cart = "結算完成，當前購物車爲空"
      return state
    case 'FENSHOU':
      state.relationship = '單身狗'
      return state
    default:
      return state
  }
}

// 根據計算規則生成 store
let store = createStore(BoyFriend)

// 定義數據（即 state）變化以後的派發規則
store.subscribe(() => {
  console.log('current state', store.getState())
})

// 觸發數據變化
store.dispatch({ type: 'JIEZHANG' })
store.dispatch({ type: 'JIEZHANG' })
store.dispatch({ type: 'FENSHOU' })

上一篇：react開發教程（八）React組件通訊
下一篇：react開發教程（十）redux結合react