在现实案例中,有很多诸如此类的实际功能需求,
例如在前端页面收藏哪篇文章,那么对应的后台数据也是要跟着变化的
在本片按文章中,我写的会稍微i复杂了一些,因为我的redux是用redux-toolkit工具
在页面也是拆分了组件的,而且会为了实现别的功能做了一些代码的调整,小伙伴自行删减哈。
我想要完成的功能是,点击组件里的收藏按钮,对应的数据发生改变。
首先是组件页面
const toSave = () => {
console.log('1111');
save({isSaved: !itemIsSaved})
// save是父组件传过来的方法, itemIsSaved是父组件传来的需要更改的字段
}
接下来是父组件、
<Card
itemIsSaved = {item.isSaved}
save = {(params)=>save(item.id,params)} />
//由于我是遍历的子组件所以有item。我们利用子组件改变isSaved重新定义给params,然后传给父组件的save方法
--------------------------------------------------------------------------------
const save = (id:number, params:any) => {
//我们先将从redux里获取到的xjhList拷贝出来一个新的数据
const newXjhList = [...xjhList];
//通过findIndex方法根据id得到对应点击的索引值
const index = xjhList.findIndex((item) => {
return id === item.id
})
console.log(index,id);
//根据索引值改变新的数据
newXjhList[index] = {...newXjhList[index], ...params}
//把新的数据保存到redux里面
dispatch(xjhActions.saveXjhList({ data: newXjhList ,type:'save'}));
}
接下来是redux页面
reducers: {
//payload就是在主页面saveXjhList后面的对象
saveXjhList: (state, { payload }: PayloadAction<any>) => {
//因为我有其他的方法所以需要判断type,是不是泥收藏时候调用的dispatch
//如果是你自己写,完全可以不写type
return {
...state,
xjhList: payload.type ==='save' ? payload.data : state.xjhList.concat(payload.data)
};
},
大致就是这样子,以后我再好好调整一下,步步学习,淦!