我应该在 React-Redux 项目的组件文件夹级别使用 actionCreators 吗?
Should i use actionCreators in Component's folder level in my React-Redux project?
我在我的 React 项目中使用 redux。我已经像那张照片那样拆分了我的文件夹:
Folder structure of my store
但是在我开发项目时,我的 folderActionCreators 文件变大了。 This is the end of file,我知道这很糟糕。是这样吗,所以我决定将我在 folderActionCreator 中的功能拆分为文件夹和文件。但我无法决定我应该怎么做?
我已经想出了一个解决这个问题的想法,但我不确定这是不是正确的方法。
我想将 folderActionCreators 中的每个函数分离到每个所需组件的组件级别。例子:
我有一个名为 FolderItem 的组件,该组件位于 FolderItem 文件夹中。 This is the example
我想在 FolderItem 中创建另一个名为 actionCreators 的文件夹,并将 FolderItem 需要的动作创建器函数移动到这里.在这种情况下,FolderItem 组件使用六个动作创建器,You can look the functions in here,我想将它们全部移动到 FolderItem 文件夹中,并且从那里导入它们。
所以我的问题是,这是一种不好的做法吗?如果是,我应该如何组织我的 actionCreators?
官方建议(可能适合也可能不适合)是将归属于一个“功能切片”文件的 reducer、选择器和动作创建器放在一个“功能切片”文件中,然后将该功能的组件文件放在一个“功能文件夹”中": 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 配合得很好,该工具包(除其他事项外,例如消除了手动编写不可变更新的需要)会自动为您创建动作创建者“案例减速器”你声明。
一般来说,我强烈建议您查看 modern redux and maybe go through the official Redux "essentials" tutorial,其中展示了如何在实践中使用现代 Redux。
我在我的 React 项目中使用 redux。我已经像那张照片那样拆分了我的文件夹: Folder structure of my store
但是在我开发项目时,我的 folderActionCreators 文件变大了。 This is the end of file,我知道这很糟糕。是这样吗,所以我决定将我在 folderActionCreator 中的功能拆分为文件夹和文件。但我无法决定我应该怎么做?
我已经想出了一个解决这个问题的想法,但我不确定这是不是正确的方法。
我想将 folderActionCreators 中的每个函数分离到每个所需组件的组件级别。例子:
我有一个名为 FolderItem 的组件,该组件位于 FolderItem 文件夹中。 This is the example
我想在 FolderItem 中创建另一个名为 actionCreators 的文件夹,并将 FolderItem 需要的动作创建器函数移动到这里.在这种情况下,FolderItem 组件使用六个动作创建器,You can look the functions in here,我想将它们全部移动到 FolderItem 文件夹中,并且从那里导入它们。
所以我的问题是,这是一种不好的做法吗?如果是,我应该如何组织我的 actionCreators?
官方建议(可能适合也可能不适合)是将归属于一个“功能切片”文件的 reducer、选择器和动作创建器放在一个“功能切片”文件中,然后将该功能的组件文件放在一个“功能文件夹”中": 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 配合得很好,该工具包(除其他事项外,例如消除了手动编写不可变更新的需要)会自动为您创建动作创建者“案例减速器”你声明。
一般来说,我强烈建议您查看 modern redux and maybe go through the official Redux "essentials" tutorial,其中展示了如何在实践中使用现代 Redux。