码迷,mamicode.com
首页 > 其他好文 > 详细

redux 初步理解

时间:2017-08-11 23:54:10      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:lte   gets   ace   proc   height   class   function   min   ons   

派发一个 action 给 reducer, reducer 生成了一个新的 state;

redux 通过 Store 来保存数据, store.getState 获得数据, 而要更新 state, 则需要 store.dispatch(action);

由于reducer 里才会生成一个新的 state, 所以 store 的创建必须是 store = createStore(reducer);

为了把 action 和 state 串起来,开发一些函数,这就是 reducer

reducer 只是一个接收 state 和 action,并返回新的 state 的函数。

 

const combineReducers = reducers => {

  return (state = {}, action) => {

    return Object.keys(reducers).reduce(

      (nextState, key) => {

        nextState[key] = reducers[key](state[key], action);

        return nextState;

      },

      {} 

    );

  };

};

 

const reducer = combineReducers({

  a: doSomethingWithA,

  b: processB,

  c: c

})

 

reducer 有3个属性 a,b,c   每个属性的值 reducer({state: a}).a ;;;;;;;;  reducer({state.b}).b

Action Creator 是一个函数,返回的是一个对象 { type:’add’,…. }

如果作为中间件, 返回的一个是一个函数 function(dispatch, getState){}

 

state

{

  todos: [{

    text: ‘Eat food‘,

    completed: true

  }, {

    text: ‘Exercise‘,

    completed: false

  }],

  visibilityFilter: ‘SHOW_COMPLETED‘

}

 

Action

{ type: ‘ADD_TODO‘, text: ‘Go to swimming pool‘ }

{ type: ‘TOGGLE_TODO‘, index: 1 }

{ type: ‘SET_VISIBILITY_FILTER‘, filter: ‘SHOW_ALL‘ }

redux 初步理解

标签:lte   gets   ace   proc   height   class   function   min   ons   

原文地址:http://www.cnblogs.com/zhengming2016/p/7348294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!