使用immultable,在reducer中更改state中的对象报错



  • 问题:添加一个点击事件,传入要修改的值,然后更改state中的一个对象的属性值。
    点击事件:
    0_1566957653114_494fa035-af82-43f9-92e4-47fb4f0fced7-image.png
    action中:
    0_1566957172068_abd16d58-baf2-4f1f-baf4-3b11bc6a77a4-image.png
    reducer中:
    0_1566957288595_c993d948-43cf-4565-bf2f-76d25efdd711-image.png
    state:
    0_1566957349356_149c7bf4-2b54-4b9e-9470-745dd9216bca-image.png



  • 1、没看懂你在那json来json去的是在干啥?就是为了建个新对象?你都这样了完全没必要再用immutable了啊?
    2、既然你搞不懂immutable的概念和语法,换用immer可能要简单些
    3、至于为什么要用immutable或者immer,可以看看这里 https://bbs.reactnative.cn/topic/5980/状态机state如果是对象数组-就不能进行浅拷贝吗/2



  • @晴明 再请假一下,我也是在学习的过程中,如果我要在reducer中直接修改state中tabs里面的一个对象的值该如何修改,之前都是直接的基本类型的值



  • @tangyanjie123 上面链接中的第7点讲过了:任何时候碰到一个有包装的数据,先换包装再修改
    怎么换包装也很简单,无论数组还是对象都可以用...运算符
    以上面的tabs为例,如果要给它添加新属性

    const newTabs = {...tabs}; // 拆包装
    newTab.newProp = someValue;  // 赋值
    return newTab
    

    如果要改tabs的type的key,

    const newTabs = {...tabs}; // 拆包装
    const newType = {...newTabs.type, key: '新key' }; // 拆包装和赋新值可以放在一起
    newTabs.type = newType; // 再赋回去
    return newTabs;
    

    如果要改tabs.type.obj

    const newTabs = {...tabs}; 
    const newType = {...newTabs.type }; 
    const newObj = {...newType.obj };
    newObj.value = newValue;
    newType.obj = newObj;
    newTabs.type = newType;
    return newTabs;
    

    所以操作原则很简单,拆拆拆赋赋赋,但是很显然也能看到,层次越深越复杂,越容易出错



  • @晴明 成功了,谢谢您的解答。学习到了



  • 本人最近又看了看immutable,再次对本帖子进行总结答复。
    也很感谢之前“晴明”的解答。我在这再给出另一个版本。

    changeFilter 函数里面:

    const changeFilter = (state, action) => {

    let keys = state.getIn(['tabs',action.key]);   //点击的顶部哪一个分类
    
    let ac = keys.updateIn(['text'], () =>action.item.name);  //改变text中的值为传过来的值
    
    let _tabs = state.updateIn(['tabs',action.key],()=>ac);  //重新修改state中的tabs,注意此时_tabs是整个state。
    
    let _state = _tabs.updateIn(['cancelPanel'],()=>true);
    
    return _state;
    

    }

    附上图片:
    0_1570413158340_0335f503-bc1c-49bc-a54f-3e3fb88fbca7-image.png


Log in to reply