react学习-redux

redux

Redux要求我们通过action来更新数据：

1. 所有数据的变化，必须通过派发（dispatch）action来更新；
2. action是一个普通的JavaScript对象，用来描述这次更新的type和content

reducer是一个纯函数；
reducer做的事情就是将传入的state和action结合起来生成一个新的state；

eg:

const redux=require('redux')

const initialState={
    counter:0
}

//reducer
function reducer(state=initialState,action){
     switch(action.type){
         case 'INCREMENT':
              return {...state,counter:state.counter+1}
         case 'DECREMENT':
             return{...state,counter:state.counter-1}
         case 'ADD_NUMBER':
             return{...state,counter:state.counter+action.num}
          case 'SUB_NUMBER':
                return{...state,counter:state.counter-action.num}
     }
}

//store
const store=redux.createStore(reducer)

//订阅store的修改
store.subscribe(()=>{
    console.log('counter：'+store.getState().counter)
})

//actions
const action1={type:'INCREMENT'};
const action2={type:'DECREMENT'};
const action3={type:'ADD_NUMBER',num:6};
const action4={type:'SUB_NUMBER',num:5};



//派发actions
store.dispatch(action1)
store.dispatch(action2)
store.dispatch(action3)
store.dispatch(action4)

开发中常用结构




使用时
在react过程中的使用