在Redux中，一个事件（Action）是一个普通的JavaScript对象，用于描述应用程序中发生的某些事情。而操作（Reducer）则是一个纯函数，接收当前状态和事件作为参数，并返回一个新的状态。但是，Redux中的事件和操作之间是否存在一对一的关系呢？本文将深入探讨这个问题。
事件和操作的定义
Redux中的事件是一个包含type属性的JavaScript对象。例如：
{
type: 'ADD_TODO',
payload: {
text: 'Buy milk'
}
}操作是一个纯函数，它接收当前状态和事件作为参数，并返回一个新的状态。例如：
-- -------------------- ---- -------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- --------------------
---------- -----
-
-
--------
------ -----
-
-事件和操作之间的关系
在Redux中，事件和操作之间并不存在一对一的关系。一个事件可以被多个操作所处理，而一个操作也可以处理多个事件。
例如，在Todo应用中，当用户添加一个新的待办事项时，可能需要更新两个不同的状态：待办事项列表和已完成事项列表。因此，我们需要编写两个不同的操作来处理这两个不同的状态：
-- -------------------- ---- -------
-------- -------------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- --------------------
---------- -----
-
-
--------
------ -----
-
-
-------- ------------------- - --- ------- -
------ ------------- -
---- -----------
------ -----
---- ----------------
------ -
---------
---------------------
-
--------
------ -----
-
-可以看到，这两个操作都可以处理ADD_TODO事件，但是它们返回的状态是不同的。
如何设计事件和操作
因为事件和操作之间并不存在一对一的关系，所以在设计Redux应用程序时，需要按照功能来划分事件和操作，而不是按照数据模型来划分。这样可以更好地将代码组织成可重用、可维护的模块。
例如，在Todo应用中，我们可以将所有与待办事项相关的事件和操作放在一个单独的模块中：
-- -------------------- ---- -------
-- --------
------ ----- ------- - ------ -- --
----- -----------
-------- -
----
-
--
------ ----- ------------ - -------- -- --
----- ----------------
-------- -
------
-
--
------ -------- -------------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- --------------------
---------- -----
-
-
--------
------ -----
-
-
------ -------- ------------------- - --- ------- -
------ ------------- -
---- -----------
------ -----
---- ----------------
------ -
---------
---------------------
-
--------
------ -----
-
-结论
在Redux中，事件和操作之间并不存在一对一的关系。一个事件可以被多个操作所处理，而一个操作也可以处理多个事件。因此，在设计Redux应用程序时，需要按照功能来划分事件和操作，而不是按照数据模型来划分。
示例代码：https://codesandbox.io/s/redux-demo-1-higdp
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30676