redux - Redux 工具包单独的操作文件？

Question

我最近发现了 redux 工具包，并且对如何使用它处理 action 和 reducer 分离有一些疑问。在 redux 工具包之前，我有单独的文件夹和文件用于 reducer 和操作，但在 redux 工具包教程的所有示例中，他们都将他们的操作/thunk 与他们的 reducer/slice 保存在同一个文件中。我将需要使用 axios 和 createAsyncThunk（我假设）来访问我的 API。将动作和减速器分开在单独的文件夹/文件中是否仍然最好？只使用 createAsyncThunk 和 createReducer 而不是 createSlice 会更好吗？在 createSlice 中，我仍然不完全理解 extraReducers 的用途以及它与 reducer 之间的区别。如果对这个库更熟悉的人可以提供帮助，我将不胜感激。

标签： reduxredux-thunkredux-toolkit

Answer 1

我最近也开始使用 Redux 工具包，我认为这非常棒，通过处理大量样板文件并遵循以标准化方式组织状态的最佳实践，确实加快了 react / redux 开发。您可以使用它轻松启动并运行npx create-react-app my-app --template redux

要回答您的问题，您不需要将减速器和操作分开，它们现在可以放在同一个文件中。

我一直在使用 createSlice 来制作我的减速器，createAsyncThunk 来调用 API，并使用 createEntityAdapter 来创建所有选择器（取决于我已经开始使用normalizr的标准化状态）

对我帮助最大的事情是一步一步仔细地遵循中级教程中级教程。在这里，一个典型的 react-redux 应用程序被转换为 Redux Toolkit 风格，您将看到原始风格的 reducer、动作等，以及它们如何被转换为使用新的 API / 风格。最后在清理部分清理部分：

我们现在有一堆不再使用的 action 和 reducer 文件，所以我们应该删除它们以清理项目。[.......] 我们也可以尝试完全从“按类型文件夹”结构切换到“功能文件夹”结构，方法是将所有组件文件移动到匹配的功能文件夹中。