十步学会 redux-toolkit

这篇文章最初是以推文串的形式发布的：https://twitter.com/chrisachard/status/1338507383765684224

如果你现在正在使用 Redux，你应该使用 redux-toolkit。

以下是使用 redux-toolkit 的 10 个步骤👇

1.

使用“configureStore”创建一个“store”。

一个存储库保存着您的所有数据以及更改这些数据的操作。

使用“提供程序”组件（例如 context）将 store 提供给所有组件。

2.

创建命名“切片”

切片保存状态的一部分，以及可以更新该状态的函数。

再也不用为了编写一个操作而修改 4 个不同的文件了！🎉

3.

将切片添加到您的商店中，方法是将切片中的“减量器”添加到商店中的“减量器”中。

当您在切片中定义“reducers:”（复数）时，会自动创建切片“.reducer”（单数）。

4.

用于更新切片状态的函数称为“reducer”。

reducer 接收当前状态和要执行的操作（数据），

并更新切片状态下的数据

（redux-toolkit 使用了 immer，所以这些状态变化实际上是非突变性的）

5.

要在组件中从 store 中获取值，请使用“选择器”。

选择器函数接收整个 Redux store，并仅返回你想要的数据。

将你的选择器传递给“useSelector”钩子，它会自动调用该钩子。

6.

要更改存储中的数据，请使用从切片导出的“操作”。

这些操作的名称基于您命名的 reducer。

但是你不能直接调用它们，因为它们需要当前状态和操作参数。

7.

要发起行动，你需要将其“派遣”到商店。

使用“useDispatch”钩子来访问“dispatch”函数

然后使用该函数来分发你的操作。

这将使用“useSelector”自动更新所有组件。

8.

Action 也可以接受参数，这些参数作为第二个参数传递给 reducer。

操作“有效载荷”将包含传递给该操作的任何内容。

（要传递多个参数，请使用对象）

9.

对于异步操作（例如获取数据），您可以使用 redux-thunk（已包含！）

创建一个 thunk（返回函数的函数）

它是异步的，并且会接收一个 dispatch 参数。

在你的 thunk 函数内部进行调度

然后像往常一样在组件中分发该操作

10.

如果直接使用 Context 呢？

是的，我通常只根据项目背景来启动项目，但对于大型项目或团队来说，Redux 可能有一些优势：

• 它提供了上下文所不具备的结构。
• 更容易测试
• Redux 开发工具真是太棒了💯

资源

此示例的代码：
https://github.com/chrisachard/redux-toolkit-example

redux-toolkit 快速入门文档：
https://redux-toolkit.js.org/introduction/quick-start

Redux 开发者工具 Chrome 扩展程序：
https://github.com/zalmoxisus/redux-devtools-extension

现任 Redux 维护者和众多链接的保管者：
https://twitter.com/acemarke

喜欢这篇文章吗？

快来关注我的推特吧！我会在那里发布软件开发技巧和话题：https://twitter.com/chrisachard 🙌