js手札--redux簡單學習[ store, action, reducer ]

Redux簡單學習 - [ store, action, reducer ]

前言

redux是一套state流的處理機制。

主要有三要素：

1. store 【長官】 管理狀態，給某個士兵發命令

2. action 【命令】 一種長官和士兵之間溝通的方式

3. reducer 【士兵】 執行命令，並反饋給長官

主要有三層數據流：

長官下達命令並把當前任務狀態告訴士兵 =>

士兵執行命令反饋任務狀態給長官 =>

長官更新任務狀態

1. 單一的state樹

全部狀態都在一顆惟一的state樹種

2. 要改state，只能經過Action指令

Action經過type，代表了我要修改什麼東東，至關於一個指令

{
  type: 'ADD_TODO',
  text: 'Build my first Redux app'
}

Action通常經過Action建立函數生成

// actions.js

export default function todos(type, a, b) {
  return {
    type,
    a,
    b
  }
}

3. Reducer經過action更新state

// reducers.js

export default function todoApp(state, action) {
  switch (action.type) {
    case 'add':
      return Object.assign({}, state, {
          result : action.a + action.b
      })
    case 'sub':
      return Object.assign({}, state, {
          result : action.a - action.b
      })
    default:
      return state
  }
}

4.Store管理state的變化

• 維持應用的 state；

• 提供 getState() 方法獲取 state；

• 提供 dispatch(action) 方法更新 state；

• 經過 subscribe(listener) 註冊監聽器;

• 經過 subscribe(listener) 返回的函數註銷監聽器。

能夠說store是真正的state管理者，其餘的，如action是命令，reducer是執行命令的士兵。

// store.js

import { createStore } from 'redux';
import { todos } from './actions';
import { todoApp } from './reducers.js';

let store = createStore(todoApp);

// 打印初始狀態
console.log(store.getState())

// 每次 state 更新時，打印日誌
// 注意 subscribe() 返回一個函數用來註銷監聽器
let unsubscribe = store.subscribe(() =
  console.log(store.getState())
)

// 發起一系列 action
store.dispatch(todos('add', 100, 99));
store.dispatch(todos('sub' ,100, 99));

// 中止監聽 state 更新
unsubscribe();

redux簡單學習（二）