Javascript 中的 Redux 源目录结构

Question

我正在探索一个简单的 redux 计数器示例（使用普通 npm Javascript 独立项目）。

考虑在中型和大型应用程序中更好地维护代码，我希望找出两种风格的优缺点b/w

样式 1：在顶级目录中创建公共文件夹，如下所示：-

一些反应项目：

src/ :
   store/:           
      actions/: 
           counterActions.js
           messageActions.js
           index.js
      actionCreators/: 
           counterActionCreator.js
           messageActionCreator.js
           index.js
      reducers/:
           counterReducer.js
           messageReducer.js
           index.js

样式 2：按功能分隔文件夹，如 :-

一些反应项目：

src/ :
   store/:           
      counter/: 
           counterActions.js
           counterActionCreator.js
           counterReducer.js
           index.js
      message/: 
           messageReducer.js
           messageActions.js
           messageActionCreator.js
           index.js

Answer 1

第二个更接近当前的建议，但当前的建议更进一步，您将所有这些放在一个文件中，并将该文件放在相关组件旁边。

官方建议将同属于一个“feature slice”文件的 reducer、selectors 和 action creator 放在一个“feature slice”文件中，然后将该功能的组件文件放在一个“feature folder”中：Redux Style Guide: Structure Files as Feature Folders with Single-File Logic

显然，有时您的操作可能并不真正只属于一个减速器或功能 - 您可以将那些具有属于它们的功能的“最多”放置，或者根据需要将它们分开。

对于该文件结构的示例，您还可以通过调用 Redux 官方“Create React App”模板查看文件结构 npx create-react-app my-app --template redux 或 npx create-react-app my-app --template redux-typescript

此外，这种方法与官方 redux 工具包提供的 createSlice function 配合得很好，该工具包（除其他事项外，例如消除了手动编写不可变更新的需要）自动为您创建动作创建者“案例reducers”你声明并使像动作字符串类型这样的东西过时。

一般来说，我强烈建议您查看 modern redux and maybe go through the official Redux "essentials" tutorial，其中展示了如何在实践中使用现代 Redux。

Javascript 中的 Redux 源目录结构

Redux source directory structuring in Javascript

redux

directory-structure