Redux中Action，Store，reducer举例

一般在ts逻辑代码里会通过Store的dispatch()方法发送一个Action对象，Action对象中第一个参数是一个动作类型类型，第二个参数是payload即自己设置的当该动作发生时携带的值，然后reducer对这个Action进行处理，reducer中第一个参数是原本的状态值，第二个参数是Action，该函数做的事就是改变原本的状态值。

如：station和train是ts代码中事件响应函数。

station(){

this.store.dispatch({//dispatch发送的是Action对象。以供reducer使用，再存到store中。

type: 'LINKHEADER2',

payload: {

tab: 1

}

})

}

 

train(){

this.store.dispatch({

type: 'LINKHEADER2',

payload: {

tab: 2

}

})

}

 

 

export const initHeader = {

title: '',

back: '',

color: '',

tab: 1

}

 

export const headerReducer2 = ( state = initHeader, action ) =>{

switch (action.type){

case 'LINKHEADER2':

// console.log(11111111111111111111111111111);

 console.log(Object.assign({}, state, action.payload));

return Object.assign({}, state, action.payload);//第一个参数{}是最终的值。

default:

return state;//state是之前的状态

}

}

 

打印出来的值为：

{title: "", back: "", color: "", tab: 2}

{title: "", back: "", color: "", tab: 1}  根据点击，来回切换。