Redux不只是美化了全球状态吗?

JavaScript

十三番长

2020-03-13

所以我一周前开始学习React,我不可避免地遇到了状态问题以及组件应该如何与应用程序的其余部分进行通信。我四处搜寻,Redux似乎是本月的风土人情。我通读了所有文档,我认为这实际上是一个非常革命性的想法。这是我的想法:

人们普遍认为状态是非常邪恶的,并且是程序设计中大量错误的来源。Redux并未将所有内容分散在整个应用程序中,为什么不将其全部集中在一个全局状态树中,而您必须发出该状态树来更改操作?听起来不错。所有程序都需要状态,因此让我们将其停留在一个不纯净的空间中,然后仅在该空间内对其进行修改,以便轻松查找错误。然后,我们还可以声明性地将各个状态块绑定到React组件,并使它们自动重绘,并且一切都很好。

但是,我对整个设计有两个问题。首先,为什么状态树需要是不可变的?假设我不在乎时间旅行调试,热重装,并且已经在我的应用中实现了撤消/重做。要做这件事似乎很麻烦:

case COMPLETE_TODO:
  return [
    ...state.slice(0, action.index),
    Object.assign({}, state[action.index], {
      completed: true
    }),
    ...state.slice(action.index + 1)
  ];

代替这个:

case COMPLETE_TODO:
  state[action.index].completed = true;

Not to mention I am making an online whiteboard just to learn and every state change might be as simple as adding a brush stroke to the command list. After a while (hundreds of brush strokes) duplicating this entire array might start becoming extremely expensive and time-consuming.

I'm ok with a global state tree that is independent from the UI that is mutated via actions, but does it really need to be immutable? What's wrong with a simple implementation like this (very rough draft. wrote in 1 minute)?

var store = { items: [] };

export function getState() {
  return store;
}

export function addTodo(text) {
  store.items.push({ "text": text, "completed", false});
}

export function completeTodo(index) {
  store.items[index].completed = true;
}

It's still a global state tree mutated via actions emitted but extremely simple and efficient.

第1450篇《Redux不只是美化了全球状态吗?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小胖番长 2020.03.13

Redux不只是美化了全球状态吗?

当然是的。但是,您曾经使用过的每个数据库都适用。最好将Redux视为内存数据库-您的组件可以依赖地依赖它。

不变性使检查子树是否被非常有效地更改成为可能,因为它简化了身份检查。

是的,您的实现是有效的,但是每次以某种方式操纵树时,都必须重新渲染整个虚拟dom。

如果您使用的是React,它将最终与实际的dom进行对比,并执行最少的批优化操作,但是完整的自上而下的重新渲染仍然效率低下。

对于不可变的树,无状态组件只需检查其所依赖的子树,与先前值相比的身份是否不同,如果这样,则可以完全避免渲染。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android