在 redux reducer 上使用括号表示法

Question

我有一个表格，可以针对商店中所做的每项更改更新我的商店。为了不必为每个 property/field 执行 20-30 个不同的操作，我创建一个包含属性-名称和值的单个操作将是一个很好的方法。所以动作看起来像这样：

export function(property, value){
    return{
        type: UPDATE_MODEL,
        property: property,
        value: value
    }
}

将其传递到我的减速器时，我尝试使用括号表示法。

case UPDATE_MODEL: {
    return Object.assign({}, state, {[action.property]: action.value});
}

执行此操作时：

dispatch(myAction("Type", {Id: 1}));

我的 reducer 会将类型属性设置为数组，而不是仅将属性类型设置为传入对象。有没有办法正确装配它？

我尝试在我想更改的当前状态对象上使用 lodash 中的 _cloneDeep，然后在其上使用括号表示法，然后用那个新对象返回 object.assign，这确实有效，只是感觉不过大错特错。

Answer 1

这个怎么样？

function updateModel(state, action) {
  return Object.assign({}, state, {
    [action.property]: action.value
  })
}

function updateModelAction(property, value) {
  return {
    type: 'UPDATE_MODEL',
    property,
    value
  }
}

function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_MODEL':
      return updateModel(state, action)
    default:
      return state
  }
}

console.log(reducer({}, updateModelAction('foo', { bar: 'baz' })))

在 redux reducer 上使用括号表示法

Using bracket notation on redux reducer

redux

react-redux