redux入门

个人只是把redux和vuex当做进行统一状态管理的工具，那个和上一篇vuex一样，这里还是举个相同的加减栗子来对redux做个入门介绍

Redux 基础概念

State

State 描述一个应用程序的全部状态,所有需要控制的状态都应设计到 state 对象中

Action

Action 用来描述一个行为，并负载相应的信息。

Reducer

Reducer 接收两个参数，第一个参数是当前状态，而第二参数是 action, 返回更新后的状态。
用来执行store触发的Action对应的方法

Store

Store 是管理应用程序 state 的容器

store = {
    getState,
    dispatch,
    subscribe,
    replaceReducer
}

如上，store共有4个API,

getState: (数据接口)
使用方式: store.getState()
功能点: redux对外导出数据的接口(getter)

subscribe: (订阅接口)
使用方式: store.subscribe(回调函数)
功能点: 在每次执行dispatch的时候，用于执行自定义的回调函数操作

dispatch: (执行接口)
使用方式: store.dispatch(action)
功能点: 在执行redux的state更新的同时，执行所有subscribe过的回调函数

replaceReducer: (重置store接口)
使用方式: store.replaceReducer(nextReducer)
功能点: 重置redux的reducer，重新启动store流程

流程图如下

项目实战：

首先安装redux到项目中

npm install --save redux

代码编写

HTML

<p>
    Clicked: <span id="value">0</span>
    <button id="increment">+</button>
    <button id="decrement">-</button>
</p>

JS

//导入createStroe
import { createStore } from 'redux'

//初始化状态
let initState = {
      count: 0,
      score: 0,
      description:'描述'
}

//创建一个Reducer
function counter(state = initState, action) {
    switch (action.type) {
        case 'INCREMENT':
              return{
                  count:state.count + 1,
                score:state.score + 2,
                description:action.data
              } 
        case 'DECREMENT':
              return{
                  count:state.count - 1,
                score:state.score - 2,
                description:action.data
              } 
        default:
              return state;
          }
    }

//将创建好的Reducer传入创建Store
let store = Redux.createStore(counter);

//获取元素节点，并绑定点击事件，点击后store将触发相应的动作Action
let valueEl = document.getElementById('value');
document.getElementById('increment').addEventListener('click', function() {
    store.dispatch({
          type: 'INCREMENT',
          data:'增加的'
    })
})
document.getElementById('decrement').addEventListener('click', function() {
    store.dispatch({
          type: 'DECREMENT',
          data:'减少的',
    })
})

//写一个render方法，在这里动态改变元素的内容
function render() {
    valueEl.innerHTML = '点击'+store.getState().count.toString()+'次-得        分'+store.getState().score.toString()+store.getState().description;
}

//执行render方法
render();

//绑定subscribe回调
store.subscribe(render);

OVER

2017-02-21