javascript - Redux 动机 : mutation and asynchronicity with example

Question

为了了解 Redux 的动机，我阅读了官方链接 https://redux.js.org/introduction/motivation还有这个 stackoverflow 问题 Explain Redux : mutation and asynchronicity但我无法获得它，因为两个链接都缺少示例。谷歌搜索也没有显示任何包含突变和异步组合示例的页面。

我想要的是现实生活中的 Web 应用程序示例，其中突变和异步性的组合一团糟。每个页面/博客都只是从管理状态开始，但它们缺少变异和异步组合解释(动机)的真实 Web 应用程序示例。任何人都可以通过举个好例子来帮助我。

Motivation is saying: we're mixing two concepts that are very hard for the human mind to reason about: mutation and asynchronicity. I call them Mentos and Coke. Both can be great in separation, but together they create a mess.. Can anyone give real example on this?

Answer 1

同时使用异步和变异，您将失去用于管理状态的“单一事实来源”。

假设您有一个初始化为 0 的全局计数器。您还有 2 个带有异步处理程序的 Button 组件，inc 和 dec 会影响全局计数器。

如果我点击 inc、inc、dec； counter 在任何时候的值(value)是多少？

我们无法知道哪些事件已经触发 b/c 它们不能保证按顺序出现。因此，如果我正在查看计数器值 1，它的 b/c 是:

已解决:inc

待定:inc，dec

或

已解决:公司、公司、公司

有了异步函数和可变状态，除非什么都没有发生，否则你永远不知道你的状态是什么。