Object.assign - 更新特定属性

时间:2016-03-19 18:38:13

标签: javascript object reactjs redux

使用React& Redux在这里:

我的State看起来与此类似:

State : {
   First : {
      prop1 : "a",
      prop2 : "b"
   },
   ...
   Last : {
      prop1 : "c",
      prop2 : "d"
   }
}

我的Reducer函数如下所示:

const tabsState = ( state = initialTabState, action ) => {
    switch( action.type ) {
    case( ENABLE_TAB ):
        return (
            Object.assign( {}, state, action.payload )
        );
    default:
        return state;
    }
};

对于action.payload,我只想发送包含prop1新值的数据。我对Object.assign的理解是sources参数只更新道具,它们不会覆盖状态中的对象,这是正确的吗?

在上面,我的action.payload类似于:

   First : {
      prop1 : "z"
   },
   Second : {
      prop2 : "x"
   },
   ...

似乎覆盖了First& State对象中的后续对象。也就是说,Reducer返回的新状态没有每个对象的第二个支柱。 prop2Š

3 个答案:

答案 0 :(得分:1)

我认为你可以使用Immutable.js。我发现处理redux而不是改变状态树非常有帮助。对于特定情况,运算符需要Map.mergeDeep()其中Map是不可变数据结构。 MergeDeep就像你在想Object.assign一样。 所以对你来说

import { fromJS } from 'immutable';
const initialTabState = fromJS({
     {
       First : {
         prop1 : "a",
         prop2 : "b"
       },
     ...
       Last : {
         prop1 : "c",
         prop2 : "d"
       }
     }
})
const tabsState = ( state = initialTabState, action ) => {
    switch( action.type ) {
    case( ENABLE_TAB ):
        return (
            state.mergeDeep(fromJS(action.payload))
        );
    default:
        return state;
    }
};

答案 1 :(得分:1)

假设您的状态如下:

{
  state: {
    meta: {
      data: {
        foo: 'bar',
      },
    },
  },
}

你希望它看起来像这样:

{
  state: {
    meta: {
      data: {
        foo: 'bar',
        hello: 'world',
      },
    },
  },
}

首先,创建一个函数来更新要获取的嵌套属性:

const update = (data, obj) => {
  return Object.assign(
    {},
    data,
    obj,
  )
}

然后,将update函数称为:

return Object.assign(
  {},
  state,
  {
    meta: {
      data: update(state.meta.data, {hello: 'world'}),
    },
  },
)

答案 2 :(得分:0)

您需要使用深度分配来合并这样的对象树。

https://github.com/sindresorhus/deep-assign