加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-redux – 在减速机中改变状态有什么后果?

发布时间:2020-12-15 16:20:07 所属栏目:百科 来源:网络整理
导读:redux指南指出: We don’t mutate the state. We create a copy with Object.assign(). Object.assign(state,{ visibilityFilter: action.filter }) is also wrong: it will mutate the first argument. You must supply an empty object as the first para
redux指南指出:

We don’t mutate the state. We create a copy with Object.assign(). Object.assign(state,{ visibilityFilter: action.filter }) is also wrong: it will mutate the first argument. You must supply an empty object as the first parameter. You can also enable the object spread operator proposal to write { …state,…newState } instead.

我碰巧写了下面的代码片段:

[actions.setSelection](state,{payload}) {
    state[payload.key] = payload.value;
    return state;
},

我对此感到不满,并重新审视了智慧指南.我已经重写了这个:

[actions.setSelection](state,{payload}) {
    const result = Object.assign({},state);
    result[payload.key] = payload.value;
    return result;
},

我很确定我在我的代码的其他地方冒犯了上面提到的诫命.如果我没有勤奋地跟踪他们,我会看到什么样的后果?

(注意:上面的reducer语法是通过redux-actions.否则它将是reducer fn switch / case中的代码块.)

解决方法

变异状态是React中的反模式. React使用渲染引擎,该引擎取决于状态变化是可观察的这一事实.通过比较先前状态和下一状态来进行该观察.它将改变带有差异的虚拟dom,并将更改的元素写回dom.

当你改变内部状态时,React不知道发生了什么变化,甚至更糟;它的当前状态的概念是不正确的.所以dom和虚拟dom将变得不同步.

Redux使用相同的想法来更新它的商店;减速器可以观察到一个动作,它可以计算商店的下一个状态.发出更改,例如react-redux connect消耗.

所以简而言之:从来没有,改变状态.您可以使用stage-3扩展语法代替Object.assign:

{...previousState,...changes}

另请注意,阵列也是如此!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读