[英]Why immer.js doesn't allow setting dynamic properties on draft?
//I want my action to dispatch payload like // {type:'update',payload:{'current.contact.mobile':'XXXXXXXXX'}} //In reducer dynamically select the segment of state update needs to be applied to //Below code doesn't work as expected though, draft always remains at same level draft = dA.key.split('.').reduce((draft, k) => { return draft[k] }, draft); //Or an ideal syntax may look like below line draft['current.contact.mobile'] = dA.value; //Code that works draft['current']['contact']['mobile'] = dA.value;
在您的情况下,此代码返回一个原始值,如不可变的字符串或数字。
draft = dA.key.split('.').reduce((draft, k) => {
return draft[k]
}, draft);
“Immer”正在使用代理来实现所有这些魔法。 代理只能在对象上工作,例如对象、数组、函数等。
所以要解决您的问题,您可以使用这样的代码
import produce from "immer";
describe("Why immer.js doesn't allow setting dynamic properties on draft?", function() {
it("should allow set dynamic properties", function() {
const path = "foo.bar.zoo";
const state = { foo: { bar: { zoo: 1 } } };
const nextState = produce(state, draft => {
const vector = path.split(".");
const propName = vector.pop();
if (propName) {
draft = vector.reduce((it, prop) => it[prop], draft);
draft[propName] += 1;
}
});
expect(nextState.foo.bar.zoo).toEqual(state.foo.bar.zoo + 1);
});
});
在上面的代码中,我们获取目标对象并更新该对象的属性。
关于 string 和 number 的一些注意事项。 Javascript 具有字符串和数字的构造函数,它们返回对象而不是原始值。 但是当有人明确使用它时,这是一种非常罕见的情况。 通常,我们在编写类似dA.key.split('.')
时会隐式地处理它。 在这种情况下,解释器将创建一个字符串对象并在其上调用方法“split”。 通常,这种行为被称为“拳击”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.