React Redux如何将组件状态作为payload发送到store并更新状态

问题根源 #

你出现这个问题的核心是Redux状态的更新字段和读取字段不匹配，具体对应两处代码不一致：

1. 你的wagesReducer初始状态定义的是value:1.5，但触发SET_WAGE_TOTALaction时，你新增了wagesTotal字段存储新值，完全没有修改原来的value字段
2. 你在ShowWages组件里读取的始终是未被修改的wages.value，所以永远只会拿到初始值1.5

修复方案（二选一即可） #

方案1：统一使用value字段存储工资总值

修改wagesReducer.js里的case逻辑，把更新的字段改为value：

case SET_WAGE_TOTAL:
  return{
    ...state,
    value: action.payload, // 把原来的wagesTotal改为value
  }

组件不需要修改，继续读取wages.value即可拿到更新后的值。

方案2：统一使用wagesTotal字段存储工资总值

第一步，修改wagesReducer.js的初始状态：

const initialState = {
  wagesTotal:1.5 // 把原来的value改为wagesTotal
}

第二步，修改ShowWages组件的取值逻辑：

return(
  <>
    {wages.wagesTotal}
  </>
)

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