Redux 例子分析： counter-vanilla

本文内容来自 Facebook 官方Git Repo： counter-vanilla
例子代码运行界面：
显示结果的文字，加上四个按钮。

对应的HTML代码：

<div>
  <p>
    Clicked: <span id="value">0</span> times
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <button id="incrementIfOdd">Increment if odd</button>
    <button id="incrementAsync">Increment async</button>
  </p>
</div>

Redux的核心，一个store：

// 创建一个 Redux store 用来保存APP的状态，
// 它的 API 有 { subscribe, dispatch, getState }.
let store = createStore(counter)

这个被创建出来的 store， 它有一个参数，这里传进出的是counter，它是一个函数，那么它是一个什么样子形式的函数呢？
它有两个参数，一个是state保存app中的状态，另一个是action，通过不同的action来改变app的状态。

function counter(state, action) {
   if (typeof state === 'undefined') {
     return 0
   }

  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
   }
}

那么，有了这个通过不同action来改变状态的函数，如何使用它呢？
两个问题：
1. 如何才能调用这个函数
2. 调用函数之后，如何知道状态已经改变

调用函数 dispatch:

store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

具体到例子里面：

document.getElementById('increment')
  .addEventListener('click', function () {
    store.dispatch({ type: 'INCREMENT' })
  })

document.getElementById('decrement')
  .addEventListener('click', function () {
    store.dispatch({ type: 'DECREMENT' })
  })

document.getElementById('incrementIfOdd')
  .addEventListener('click', function () {
    if (store.getState() % 2 !== 0) {
      store.dispatch({ type: 'INCREMENT' })
    }
  })

document.getElementById('incrementAsync')
  .addEventListener('click', function () {
    setTimeout(function () {
      store.dispatch({ type: 'INCREMENT' })
    }, 1000)
  })

状态改变之后，如何知道？你需要订阅！

store.subscribe(render)

这里的render函数里面，它可以调用 store 里的状态：

function render() {
  valueEl.innerHTML = store.getState().toString()
}
render()

组合起来，完整的javascript代码：

    <script>
      function counter(state, action) {
        if (typeof state === 'undefined') {
          return 0
        }

        switch (action.type) {
          case 'INCREMENT':
            return state + 1
          case 'DECREMENT':
            return state - 1
          default:
            return state
        }
      }

      var store = Redux.createStore(counter)
      var valueEl = document.getElementById('value')

      function render() {
        valueEl.innerHTML = store.getState().toString()
      }

      render()
      store.subscribe(render)

      document.getElementById('increment')
        .addEventListener('click', function () {
          store.dispatch({ type: 'INCREMENT' })
        })

      document.getElementById('decrement')
        .addEventListener('click', function () {
          store.dispatch({ type: 'DECREMENT' })
        })

      document.getElementById('incrementIfOdd')
        .addEventListener('click', function () {
          if (store.getState() % 2 !== 0) {
            store.dispatch({ type: 'INCREMENT' })
          }
        })

      document.getElementById('incrementAsync')
        .addEventListener('click', function () {
          setTimeout(function () {
            store.dispatch({ type: 'INCREMENT' })
          }, 1000)
        })
    </script>