Redux简介

什么事redux？

对于前端页面，从数据层面来说，无非就是 一系状态的组合。在传统的前台开发中，尤其是jquery横行的年代，状态管理相关的理念一直没有什么特色。

可是自从Flux出现以来，各种解决方案层出不穷，Redux也是在这个环境下诞生的。

简单来说：

redux就是一个状态容器，里面存储了整个应用的所有状态，

redux的核心思想就是要提供可预测的状态管理。

redux中有三个基本概念非常重要：store，reducer，action

store顾名思义就是状态容器，redux使用createStore这个api来创建一个全局状态容器 。（其中redux应用只能有一个单一的Store）

reducer是一个纯函数，他的职责就是用来更新状态容器中的状态。这也是redux中更新状态 的唯一途径。

Action是一个普通的JavaScript对象，它是吧数据从应用传递到状态容器的载体。将 action传递到store中很简单，使用store.dispatch（action）就可以了。

为了区分不同的数据来源，我们一般约定每个 action都必须要有一个type字段。

这样reducer函数就能根据这个type字段来决定如何来 修改状态容器中的状态。

DEMO：

大概逻辑是：

先定义reducer

调用createStore创建store

最后dispatch相关的action

对应到具体业务中的过程：

用户点击某个按钮

然后状态容器dispatch这个action

action最后传到reducer中

reducer根据action的内容来修改状态

状态容器状态发生改变后触发试图更新

代码：

// Redux的两个核心api

// createStore用于创建状态容器

// combineReducers用于将多个reducers合并成一个Redux

let {createStore,combineReducers} = Redux

// 状态容器的初始状态

// 一般用于同构应用，服务器端返回相关数据

let INITIAL_STATE = {

counter : {

count : 0

}

}

// reducer函数，用于变更状态中的状态

// 如果action位置，则原样返回

// 永远不要修改state，返回一个全新的state

function counter(state = INITIAL_STATE .counter, action){

switch (action .type) {

case 'INCREMENT' :

return {count : state .count + 1}

case 'DECREAMENT' :

return {count :state .count - 1}

default:

return state

}

}

// 状态容器三个核心方法；

// subscribe用于监听事件，每当dispatch的时候会执行

// dispatch用于分发action，这是改变状态容器中state的唯一途径

// getState获取当前state

// combineReducers用于将多个reducers合并成一个Redux函数

// 需要注意的是合并之后每个子reducer只能处理状态容器上其对应的那部分状态

// 比如counter这个reducer就只能修改store.getState().counter上的状态

let store = createStore(combineReducers({counter}), INITIAL_STATE)

store .subscribe(() =>

console .log( "获取当前状态容器：",store .getState())

)

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

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