redux 使用-一一网

写在前面的话：

redux 可结合react等库一起使用，下面先介绍单独使用redux时的用法。

用法一

让我们结合一个计数器案例来看它的使用吧 ?
假设页面上分别由加、减两个button 和一个span标签（如下），我们想通过点击button，实现count的加减。

  <button id = 'plus'>  + </button>
  <span id='count'> 0 </span>
  <button id = 'minus'> - </button>
复制代码

一. 引入cdn版本

    <script src='https://cdn.bootcdn.net/ajax/libs/redux/4.1.0/redux.js'></script>
复制代码

这样就在全局得到一个Redux对象

1. 创建store

 const store = Redux.createStore(reducer)
复制代码

3. 定义初始状态

    const intitalState = {
          count: 0,
    }
复制代码

2. 定义reducer

    const reducer = (state = intitalState, action)=> {
      switch (action.type){
        case "increment":
          return {
            count: state.count +1
          };
          case "decrement":
            return {
              count: state.count - 1
            };
          default: 
          return state
      }
    }
复制代码

4. 定义action

    const increment = {
      type: "increment"
    }
    const decrement = {
      type: "decrement"
    }
复制代码

5. 触发action

    const plus = document.getElementById("plus")
    const minus = document.getElementById("minus")
    plus.addEventListener('click', () => {
      store.dispatch(increment)
    })
    minus.addEventListener('click',() => {
      store.dispatch(decrement)
    })
复制代码

6. 订阅store，状态发生改变时手动更新

store.subscribe(() => {
    const el = document.getElementById("count");
    el.innerHTML = store.getState().count
})
复制代码

总结

redux的核心api

    //1. 创建Store容器
    const store = Redux.createStore(reducer)
    //2. 创建处理状态的reducer
    function reducer (state, action) {
    // 函数的返回值即为store对象
    // reducer 函数接收两个参数
      // state 即为向store中存储的状态，（可通过createStore的第二个参数指定，也可以通过函数默认参数的形式制定）
      // 即为触发的action对象，被reducer的第二个参数接收。 可根据action中type值的不同，对store中的状态进行处理
    }
    //3. 获取状态
    store.getState()
    //4. 订阅状态
    store.subscribe(function () {
    //当store中的状态发生变化时，store就会执行subscribe中传递的函数
    //通常使用这个方法得到store的最新状态以更新视图
    })
    //5. 触发action
    store.dispatch({type: 'xxxx'}) //通过调用dispatch 触发 action
复制代码