使用Redux更新购物车时reducer中state.products不可迭代如何解决

• reducer的default分支错误返回空字符串""，未返回当前传入的state参数
• Redux初始化时会触发一次无匹配type的action，命中default分支后，原本包含products数组的初始状态对象会被覆盖为字符串
• 后续触发ADD_TO_BASKET类型action时，state已为字符串类型，state.products取值为undefined，无法执行展开迭代操作，因此抛出对应报错

/* eslint-disable import/no-anonymous-default-export */
const initialState ={
    products:[]
}
export default (state=initialState,action)=>{
    switch(action.type){
        case "ADD_TO_BASKET":
            return {...state,products:[...state.products,action.payload]};
        default:
            // default分支返回原state即可
            return state;
    }
}

• Redux reducer要求所有分支必须返回与初始状态结构一致的合法状态值，禁止返回undefined、字符串等不符合结构的值
• 每次返回新状态时需保持与初始状态的结构完全对齐，避免出现属性丢失的问题

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