reactjs - 更新状态的多个部分的 Reducer

Question

实际上，每次更新 state.thickness 时，我都需要更新 state.litres。我怎么做？ (我使用“state”这个词来表示 redux store)

这是我的 reducer :

export const thickness = (
  initialThickness: Map<*, *> = initialState.get('thickness'), 
  action: Object) => {
  switch(action.type) {
    case 'UPDATE_THICKNESS': {
      const litres = calcVol(action.payload.state)
      let newThickness = initialThickness
        .set('thickness' + action.payload.number, action.payload.value)
      return newThickness
    }
    default:
      return initialThickness
  }
}

litres 是我当时刚刚添加的东西，我想将它和 newThickness 一起归还 - 这是我更新 state 的尝试。升 当我更新 state.thickness 时。

如果你能对此发表意见，加分:为了计算升，我需要访问整个状态(redux 存储)以传递给 calcVol(state)(它计算并返回容积(升)。像这样在 action 中传递整个状态，以便我可以在 reducer 中使用它，性能？还是有更高效的方式？

const mapDispatchToProps = (dispatch) => ({
  updateThickness: (text, number, state) => {
    dispatch(updateDimension('thickness', text, number, state))
  }
})

Answer 1

像这样的 reducer 不能同时更新 thickness 和 litres 因为它只能影响它负责的节点(在这种情况下为 thickness ).您可以:

1. 将 reducer 向上移动一个级别并让它同时拥有 thickness 和 litres 节点，即 initialState = { thickness: 0, litres: 0 } }
2. 让 litres reducer 也处理 UPDATE_THICKNESS 操作类型并相应地更新 litres。

但是，您没有理由不能同时调度 'UPDATE_LITRES' 操作。如果你使用像 redux-thunk 这样的中间件那么这就更容易了，因为你可以从同一个 thunk 发送两者，而且它还可以消除在 Action 中传递整个状态的需要(我不推荐，但没有数字来支持它) .

const setThickness = (number, value) => {
    return (dispatch, getState) => {
        dispatch({ type: 'UPDATE_THICKNESS': payload: { number, value } })

        let litres = calcVol(getState())
        dispatch({ type: 'UPDATE_LITRES': payload: { number, value: litres } })
    }
}

希望这对您有所帮助。