如何将Redux动作用于多维对象?

时间:2017-07-27 00:47:04

标签: javascript reactjs redux react-redux

我有一个简单的操作来设置n1维度的状态 我的状态对象和缩减器看起来像这样

    const F2F = {
        openF2F: false,
        ...
    }

    const initialState = {
        showModal: false,
        F2F,
        ...
    }

export default function reducer(state=initialState, action) {
    switch (action.type) {

        case psActions.ON_CHANGE:
            return {
                ...state,
                [action.fieldName]: action.value
            }

        default:
            return state
  }
}

我有一个问题如何使动作指向状态对象

export function onChangeDim(value, name, dimension) {
    return {
        type:      psActions.ON_CHANGE,
        fieldName: dimension[name],//Tried many things her
        value:     value
    }
}

更新 现在我知道如何指向F2F对象

case psActions.ON_CHANGE_DIM:
    return {
        ...state,
        [action.dimension]: {
            [action.fieldName]:action.value
        }
    }

但不知道如何在F2F内传递其他州。因为现在当我设置一个州时,它只有一个在里面 谁能帮我?

1 个答案:

答案 0 :(得分:1)

尝试以下块来解决嵌套状态问题。

如果你正在使用babel transform-object-rest-spread,那就是你的样子。

return {
    ...state,
    [action.dimension]: {
        ...state[action.dimension],
        [action.fieldName]:action.value
    }
}

Object.assign({}, state[action.dimensions], { ... })可以另外使用。

编辑:解决你的意见;

请查看MDN关于Object.assign()

的文档
  

Object.assign()方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

因此,在此示例中:Object.assign({}, state[action.dimensions], { ... })我们正在使用空对象{}并从{{1}分配所有可枚举自己的属性} 进去。然后我们从state[action.dimensions]获取可枚举的拥有的属性,并将它们应用于更新的对象。

合并具有相同属性的对象

  

属性将被稍后在参数顺序

中具有相同属性的其他对象覆盖

这是使用babel transform-object-rest-spread插件时{ ... }转化为的内容。

深度克隆警告

  

对于深度克隆,我们需要使用其他替代方法,因为Object.assign()复制属性值。如果源值是对象的引用,则它仅复制该引用值。