Redux源码分析之基本概念

Redux源码分析之基本概念

Redux源码分析之createStore

Redux源码分析之bindActionCreators

Redux源码分析之combineReducers 

Redux源码分析之compose 

 Redux源码分析之applyMiddleware 

redux版本 3.7.2 （注: 分析的是redux，不是React-redux, 我这里是直接引入浏览器里，所以出现的 self.Redux，不要惊奇）

借用一张图，先了解下redux的几个概念

action: 一个操作的定义，大概是这个样子, 本身是一个对象

1 2 3 4 {      type: 'add' ,      todo  }

actionCreater: 一个函数，返回结果是一个action

1 2 3 4 5 6 function  add (todo) {          return  {              type:  'add' ,              todo          }      }

reducer： 真正更新数据操作的函数，大概是这么个样子

1 2 3 4 5 6 7 8 9 10 11 // reducer let  todoReducer = function (state = todoList, action) {      switch  (action.type) {          case  'add' :              return  [...state, action.todo]          case  'delete' :              return  state.filter(todo => todo.id !== action.id)          default :              return  state      } }

store： 只有一个。把action,state,reducer连接起来的对象。有如下方法

dispatch：触发一个actionsubscribe ： 订阅storegetState ：获得当前的statereplaceReducer ：更换reducerobservable ：暂无研究（尴尬）

 

我们先来一个简单的示例，直接dispatch action模式。这里大家应该都懂，不然。。。。。。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 /* 简单示例 */ let  { createStore } = self.Redux   //默认state let  todoList = [] // reducer let  todoReducer = function (state = todoList, action) {      switch  (action.type) {          case  'add' :              return  [...state, action.todo]          case  'delete' :              return  state.filter(todo => todo.id !== action.id)          default :              return  state      } }   //创建store let  store = createStore(todoReducer)   //订阅 function subscribe1Fn() {      console.log(store.getState()) } let  sub = store.subscribe(subscribe1Fn)   store.dispatch({      type:  'add' ,      todo: {          id: 1,          content:  '学习redux'      } })   store.dispatch({      type:  'add' ,      todo: {          id: 2,          content:  '吃饭睡觉'      } })   store.dispatch({      type:  'delete' ,      id: 2 })   // 取消订阅 sub()   console.log( '取消订阅后：' ) store.dispatch({      type:  'add' ,      todo: {          id: 3,          content:  '打游戏'      } })　　

 输出如下：

createStore传入reducer生成store，store就可以订阅，和派发事件了，还是比较简单的。

subscribe 是可以取消的，subscribe返回的是一个函数，执行该函数就会取消订阅。