上一篇文章我们讲了如何在 React项目中添加 react-redux 状态管理 ,遗留一个比较棘手的问题:当我们直接修改state中的数据时,发现数据发生了变化,但是页面并未渲染
代码:
let data = {
list:[],
status:false,
}
export default function (state = data, action) {
switch (action.type) {
case 'fixList':
// 直接修改数据
!state.list.includes(action.data) ? state.list.push(action.data) : console.log('已存在该商品')
return state
default:
return state
}
}
上面代码执行完毕,我们会发现数据发生变化,但是页面并未渲染
官网明确表明:
state的引用没变,导致比较的时候前后state相等,所以没触发渲染。
redux是不可变数据的,每次数据变更需要返回一个新的数据。
解决方法:
①:使用 展开运算符 […]
let data = []
export default function (state = data, action) {
switch (action.type) {
case 'append':
state.push(action.data)
return [...state]
default:
return state
}
}
②:使用Object.assign() 浅拷贝
let data = {
list:[],
status:false,
}
export default function (state = data, action) {
switch (action.type) {
case 'fixList':
let list = state.list
!list.includes(action.data) ? list.push(action.data) : console.log('已存在该商品')
return Object.assign({},state,{list:[...list]})
default:
return state
}
}