2020 年如何编写现代 Redux——强大的 createSlice

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在上一篇文章中，我简要介绍了 Redux Toolkit及其基本功能。但我仍然需要谈谈它最重要的功能——`setUp() createSlice`——这可能是你在编写大多数应用程序时唯一需要用到的功能。

这是什么createSlice？

如果你曾经使用 Redux 构建过应用程序，你最终可能会得到一个包含多个 reducer 的 store，每个 reducer 处理应用程序的特定部分。然后，你会将它们全部组合到一个通常被称为rootReducer 的组件中，rootReducer 随后用于创建 store 本身。

所以，您创建的店铺看起来会像这样：

这些键值对中的每一个都是应用程序的一个“切片”。您可以在Redux 文档中阅读更多关于拆分 reducer 的逻辑。

createSlice它非常方便，因为它处理每个切片所需的一切，因此您无需手动调用createAction，createReducer只需使用一个函数即可替代。

一个简单的例子是：

返回的对象createSlice将是：

{
  name: "todos",
  reducer: (state, action) => newState,
  actions: {
    addTodo: (payload) => ({type: "todos/addTodo", payload}),
    toggleTodo: (payload) => ({type: "todos/toggleTodo", payload})
  },
  caseReducers: {
    addTodo: (state, action) => newState,
    toggleTodo: (state, action) => newState,
  }
}

现在我们已经拥有了所需的一切：

• 该name参数将作为所有操作类型的前缀。
• initialState用于商店；
• reducer 仍然是对象中的方法，它们仍然可以直接修改状态——多亏了immer——它的工作方式与createReducer;
• 每个 reducer 都会创建一个 action，它们都具有相同的函数签名，类型属性是从切片名称加上 reducer 方法派生而来的，例如“todos/addTodo”和“todos/toggleTodo”；
• 这些操作仅接收一个“有效载荷”参数，这符合Flux 标准操作模式的建议。如果需要传递多个参数，请将它们放在一个对象中。

处理多个切片

大多数项目都会包含许多切片，按功能将它们分开是一种不错的做法，这样每个切片就包含处理 store 各个部分的更小逻辑。对于这类项目，createSlice这可能就足够了，每个切片都应该放在单独的文件中，其中包含 reducer 的默认导出和 actions 的命名导出。

把所有内容综合起来，最终会得到类似这样的结果：

结论

由于 Redux Toolkit 是一个带有明确规范的工具，而 Redux 也更明确地规定了你应该遵循哪些规则以及如何构建你的应用程序，因此你可以放心，你的应用程序默认情况下会遵循这些规则。

我相信现在我们都能利用 Redux 编写出更好的应用程序，它能帮我们省去过去几年编写的大量样板代码，让代码库的维护变得更加轻松。软件开发不断发展，学习新知识也是在所难免的。希望现在你已经掌握了足够的信息，可以开始在你的项目中使用 Redux Toolkit 了！

请查看此页面，其中包含迁移到新方法的详细步骤指南。如果您想更深入地了解本文中提到的一些准则，请查看Redux 风格指南页面。

欢迎大家提出任何意见和建议！如果您有任何问题，请在下方留言；如果您喜欢这篇文章，请点赞哦😄

欢迎在 Twitter 上关注我 - @vcapretz - 以便保持联系，我的私信永远开放！

感谢Erik Engervall为我审阅这篇文章！
封面照片来自Unsplash的Денис Евстратов 。