Redux 的 Action 和 Reducer 需不需要单独文件存放？
这是一个关于 Redux 中文件存放的经典问题。在 Redux 中，Action 和 Reducer 通常是需要被拆分成独立的文件进行存放，但是这是否是必须的呢？在本文中，我们将探讨这个问题。
什么是 Action 和 Reducer？
在深入探讨问题之前，让我们先了解一下 Redux 中的 Action 和 Reducer：
- Action：用于描述应用中发生的事件的纯 JavaScript 对象。按照 Redux 的设计思想，应该尽可能减少对状态树的直接操作，而是将事件以 Action 的形式传达给 Reducer。
- Reducer：接收与之相关联的 Action，更新应用程序的状态树，并返回新的状态对象。
根据 Redux 的设计模式，Action 和 Reducer 的“单一职责原则”单独存放能够更好的维护和扩展应用程序。
为什么需要单独存放？
以下是我们需要单独存储 Action 和 Reducer 的一些理由：
可维护性
通过将 Action 和 Reducer 单独存储，可以提高代码的可读性和可维护性。您可以更容易地找到特定行为的 Action 和 Reducer，并修改或替换它们。
高可扩展性
Redux 应用程序往往会变得非常复杂，Action 和 Reducer 的数量随着时间的流逝也会逐渐增加。我们可以通过将它们彼此分离以及与业务逻辑分离，使应用程序更易于扩展。如果您要在应用程序中添加新行为，可以通过添加新的 Action 和 Reducer 来实现，而不需要修改现有的代码。
更好的组织
单独存放 Action 和 Reducer 能够帮助您更好地组织代码结构。您可以将它们存储在单独的文件（例如 actions.js 或 reducers.js），也可以根据功能模块来组织不同的文件夹。
如何实现？
存储 Action
创建一个名为 actions.js 的 JavaScript 文件，每个 Action 都是一个纯 JavaScript 对象，例如：
export const incrementCount = () => {
return {
type: 'INCREMENT_COUNT'
}
}存储 Reducer
与 Action 一样，创建一个名为 reducers.js 的 JavaScript 文件，例如：
-- -------------------- ---- -------
----- ------------ - -
------ -
-
------ ----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
------ ----------- - -
-
--------
------ -----
-
-在应用程序中使用 Action 和 Reducer
使用上述代码创建文件后，您可以将它们导入到您的应用程序中的任何位置。例如，在组件中使用它们：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------ - ------------ - ---- ------------
----- ----- - -------------------------
-------- ----- -
----- ------- --------- - -----------
-------- ---------------------- -
--------------------------------
-------------- - --
-
------ -
-----
--------- -----------
------- -------------------------------------------------
------
-
-
------ ------- ---在这种情况下，通过将 Action 和 Reducer 存储在单独的文件中，我们可以更好地组织代码，并使其更易于扩展和维护。
结论
虽然在 Redux 中，Action 和 Reducer 不一定需要单独放在文件中进行存储，但是这样做可以提高代码的可读性和可维护性，同时也极大地优化了应用程序的可扩展性。我们强烈建议您将它们存储在不同的文件中，以便轻松管理和维护您的应用程序。
最后，如果你想学习更多 Redux 的知识和指导，请阅读自学网（https://www.zmrenwu.com/）的 Redux 教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f68fb8c5c563ced5898b2e