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}  根据点击,来回切换。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值