ES6环境下Redux reducer函数返回值及更新逻辑疑问

核心结论 #

reducer始终只会返回一个全新的state对象，不存在同时返回state、list两个值的情况，你提到的写法是ES6对象/数组展开运算符的标准用法，用来实现Redux要求的「不可变更新」规则。

逐行拆解return逻辑 #

你贴的代码中GET_TICKET分支的return语句做了两件事：

• 首先用...state把原有state的所有属性浅拷贝到新创建的空对象中，保证原state不会被直接修改（Redux要求reducer必须是纯函数，禁止修改入参state）
• 然后显式声明list属性，覆盖新对象中从旧state拷贝来的同名属性：这里用[...state.list, action.payload.data]（注：你贴的代码此处存在笔误，直接写...list会报未定义错误，正确写法应该引用原state里的list，即...state.list）对原有list数组做浅拷贝，再把本次请求拿到的action.payload.data追加到新数组的末尾，最终得到更新后的list值。

举个具象的例子，假设执行前state的值是{ list: [1,2,3], otherProp: 'test' }，action.payload.data是4，那么return的结果就是全新的对象：{ list: [1,2,3,4], otherProp: 'test' }，原state对象不会有任何变化。

常见误区说明 #

很多初学者会把展开运算符的写法误以为是返回多个值，实际上：

• 对象展开运算符只是简化了对象属性拷贝的写法，等价于用Object.assign({}, state, { list: newList })的效果
• 整个return语句最终产出的只有一个对象，作为reducer执行后新的全局state值

内容的提问来源于stack exchange，提问作者Sabbu