Redux 初识

　　Redux可以看成是一个状态管理库。其为单一数据源，整个应用的state被存储在一棵object tree中，object tree只存在于唯一一个store中。

一、Action

　　action是一个用于描述已发生事件的普通对象，它是store数据的唯一来源，一般通过store.dispatch(action),将action传到store中。

　　本质上为JS普通对象。

　　　　var add = {   type : 'ADD',

　　　　　　　　　　　index : 1  }

　　必须使用一个字符串类型的type字段来说明要执行的动作，type被定义成字符串常量。我们也应尽量减少在action中传递的数据。

　　action创建函数（action creator），就是生成action的方法。在redux中，action创建函数只是简单的返回一个 action对象。

　　　　var add = () =>  {  type : 'ADD',

　　　　　　　　　　　　　　 index : 1  }  

　　　　function add () {  return  {  type : 'ADD',

　　　　　　　　　　　　　　　　　　 index : 1   } }

　　注意区分action creator与action的区别，两个是不同的概念。

　　 只需把action creator的结果传给dispatch，即可发起一次dispatch过程。

二、Reducer

　　 reducer是一个纯函数，接收旧的state和action，返回新的state。

　　function APP (state = initialState , action) {

　　　　switch (action.type ) {

　　　　　　case 'ADD' : return Object.assign( {} , state , { addIndex : 1 } )

　　　　　　default : return state

 

　　　　}

　　}

　 注意：不要修改state。使用Object.assign()新建了一个副本，第一个参数必须是一个空对象。　　　　

　 redux提供了combineReducers(),来将多个reducer，合并成一个。返回一个新的reducer。将其传给createStore()。

 

三、Store

　　store连接action和reducers

　  用createStore()可以创建一个store，并传入reducer。

　  职责是：维持应用的state，提供getState()方法，提供dispatch(action)更新state，subscribe(listener)注册监听器，　　subscribe()返回的函数可以注销监听器。

四、数据流

　　严格的单向数据流是 Redux 架构的设计核心。

　  Redux 应用中数据的生命周期遵循下面 4 个步骤：

　　　 1、调用store.dispatch(action)

　　　　　  你可以在任何地方调用 store.dispatch(action)，包括组件中、XHR 回调中、甚至定时器中。

　　　 2、store调用传入的reducer函数

　　　 3、根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。

　　　 4、Redux store 保存了根 reducer 返回的完整 state 树。

　　　　　　这个新的树就是应用的下一个 state！所有订阅 store.subscribe()的监听器都将被调用；监听器里可以调用store.getState()获得当前 state。

　　　　　　现在，可以应用新的 state 来更新 UI。如果你使用了react－redux这类的绑定库，这时就应该调用component.setState()来更新state。

 

 

 

　　　　

 

转载于:https://www.cnblogs.com/weitian/p/redux.html