对象分配 - 更新特定属性
Object.assign - Update Specific Property
在这里使用 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
参数只更新道具,它们不会覆盖状态中的对象,对吗?
在上面,My action.payload 类似于这样:
First : {
prop1 : "z"
},
Second : {
prop2 : "x"
},
...
它似乎覆盖了 State 对象中的First
和后续对象。也就是说,Reducer
返回的新状态没有每个对象的第二个道具。 prop2
s
假设您有一个如下所示的状态:
{
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'}),
},
},
)
我认为你可以使用不可变.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;
}
};
您需要使用深度赋值来合并这样的对象树。
https://github.com/sindresorhus/deep-assign
相关文章:
- Css order属性不't在Jquery设置时更新
- 通过jQuery添加ng样式属性,angular不更新
- 更新属性工作不正常Meteor/MongoDB
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 如何动态更新输入值属性
- 无法使用编程加载的属性更新范围滑块.js
- 使用Angular Directive用$scope属性更新DOM-只要指令运行(无需等待事件)
- 使用 HTML + Javascript 的多项选择测验:回复:使用数组对象和属性更新分数(帮助分析代码)
- 从新对象的属性更新对象的属性,但前提是新对象上的属性不是未定义的
- 浏览器如何从内部HTML属性更新DOM
- 使用计算属性更新 Ember 模型
- 从 AngularJS 中的服务属性更新$scope
- Ember绑定属性没有更新,尽管控制器属性更新得很好
- HTML5自定义属性更新值
- 数据变量没有从Vue.js中的监视器上的计算属性更新
- 使用ajax和data-*属性更新按钮
- 为什么我不能用Javascript innerHTML属性更新HTML列表项?
- 当数组中的任何项被更改时,如何使Ember计算属性更新
- 属性更新以触发对象的另一个方法
- Vue.js计算属性更新数量