Javascript Object.assign-更新特定属性

在此处使用React和Redux：

我的

状态

与此类似：

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

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

我的

Reducer

函数如下所示：

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

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

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

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

对于

action.payload

，我只想发送包含

prop1

新值的数据。我对

Object.assign

的理解是

sources

参数只更新道具，它们不会在状态下过度写入对象，对吗

在上面的示例中，我的action.payload与此类似：

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

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

---

它似乎正在覆盖State对象中的

第一个

&后续对象。也就是说，

Reducer

返回的新状态没有每个对象的第二个属性

prop2

s

您需要使用deep assign来像这样合并对象树

---

我认为您可以使用Immutable.js。我发现它对处理redux和不改变状态树非常有用。对于特定的情况，需要使用操作符

Map.mergeDeep（）

其中Map是不可变的数据结构

MergeDeep

的行为就像您在思考对象一样。分配将。 那么你的案子呢

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;
    }
};

---

假设您的状态如下所示：

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

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

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

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

你想让它看起来像这样：

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

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

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

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

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

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

然后，像这样调用

update

函数：

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

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

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

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

---

如果存在深层更新状态的问题，请考虑将数据结构更改为其他内容。例如，见。此外，您还可以拆分减速器并为

第一个

，

第二个

等创建特殊减速器。谢谢，我现在采用的是不可变的。很好！我真的很喜欢和它一起工作！我觉得这让我明白了。谢谢你让我认识大卫，我觉得Object.assign deep merges也是。