什么是Redux？

• Redux对于JavaScript应用而言是一个可预测状态的容器
• Redux最主要是用作应用状态的管理

注意：Redux和React不是包含关系

---

Redux的接口

• Redux.createStore()：用于创建store（传入合并后的rootReducer）
• Redux.combineReducers()：用于合并各个reducer（传入各个reducer）
• ReduxapplyMiddleware()：用于应用中间件（异步dispatch时常用）

直接使用Redux案例

仅仅使用Redux完成状态管理实现简单计数

1. HTML部分

<span id="num">1</span>
<button onclick="add()">增加</button>

2. CDN引入Redux

<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>

3. 首先，使用Redux需要先创建Reducer（可能有很多Reducer）

// 初始state对象
const initCounter = {
    x: 19
}
const countReducer = (state = initCounter, action) => {
    // state为传入的state状态（可以初始化，之后传入的就是之后的state）
   // action传入对象（操作类型，携带的参数）
    switch (action.type) {
      case 'ADD_FIVE':
        return {
          // 其余state键值对保持不变（es6结构）
          ...state,
          x: state.x + 5  // 设置值
        }
      default:
        return state
    }
}

4. 合并各个Reducer（使用Redux.combineReducers方法，传入各个Reducer）

const rootReducer = Redux.combineReducers({
  countReducer 
  // 如还有reducer添加即可
})

5. 创建store（使用Redux.createStore()方法，传入合并后的rootReducer）

// 创建store添加数据
const store = Redux.createStore(rootReducer)

6. 将设置在store中的值设置在页面上

const setCounterHtml = () => {
    // store.getState() 取出reducer的值 store.getState一定要执行才能得到值
    document.querySelector('#num').innerHTML = store.getState().countReducer.x
  }
  // 调用方法，设置值
  setCounterHtml()

7. 为按钮添加点击方法，将store中的值更改

const add = () => {
    // diapath传入数据使用payload(非必须命名)
    store.dispatch({
      // action设置的类型
      type: 'ADD_FIVE',
      // 传入参数
      payload: {
        number: 50
      }
    })
  }

8. 但是此时点击按钮页面上的值没有更改（其实store中的值是改变了的，但是需要调用store.subscribe()方法执行更新HTML页面函数(setCounterHtml)）

store.subscribe(setCounterHtml)

案例完成了一个基本的Redux使用流程，下次会在React脚手架中使用redux、react-redux、redux-thunk完成容器状态修改（同步、异步）