Redux 速成课程（含 Hooks）🎣

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

这就是基础知识！

代码示例：

这最初是在推特上发布的：https://twitter.com/chrisachard/status/1179015849459507200

Redux 是否让你感到困惑？

使用新的 Redux hooks 可以使其变得更简单。

🔥这是 Redux 的速成课程，以及如何将其与 React 函数组件一起使用：

1.

Redux 为您提供了一个集中放置 JavaScript 应用程序状态（数据）的位置

它最常与 React 一起使用（通过 react-redux）

这使您可以从树中的任何组件访问或更改您的状态

2.

您的状态位于中央 Redux 存储中

该存储是通过称为 reducer 的函数创建的

Reducer 接收一个状态和一个动作，
并返回相同或新的状态

3.

Provider该商店通过react-redux提供给您的应用程序

使用提供程序包装整个应用程序，以便应用程序中的任何组件都可以访问商店

4.

要从 store 中获取数据，请使用useSelectorreact-redux 中的 hook

selector只是一个花哨的说法：“从存储中获取数据的函数”

useSelector 接受一个回调，它获取整个 redux 状态，然后你只需挑选出该组件所需的内容

5.

动作是普通的 JavaScript 对象

所有操作都应该有一个“类型”键

它们可能还有额外的键（参数）

6.

动作不是被“调用”，而是被“分派”给减速器

动作type告诉 reducer 要做什么（返回新状态还是旧状态）

7.

要更改存储中的数据，首先编写 reducer：

Reducer 通常用 switch/case 语句编写，但不一定如此

它们只需要采取一个动作和一个状态，然后返回一个新的状态

8.

重要的是，reducer 返回一个新的状态对象（而不是改变旧的状态对象），以便当某些内容发生变化时，组件将重新渲染

不要在 Reducer 中设置状态值 - 只返回具有更改值的新状态对象

9.

要分派动作，请使用useDispatchreact-redux 中的钩子

使用 action 对象调用 useDispatch，

它将通过减速器运行，

并可能改变状态

10.

所有连接的组件（调用 useSelector）将自动获取新状态

这被视为 props 或状态改变 - useSelector 将自动检测变化并且 React 将重新渲染组件

🎉 塔达！

这就是基础知识！

Redux 可以以更复杂的方式使用，但核心始终是：

1. 向 store 发送一个动作
2. 可能会也可能不会通过 reducer 改变状态
3. 使用选择器访问该状态
4. 更改将自动重新渲染你的应用

💯

代码示例：

在 codesandbox 上查看并试用本课程中使用的代码：

https://codesandbox.io/s/redux-count-hrdtd?fontsize=14

喜欢这个速成课程吗？

在 Twitter 上查找更多信息：@chrisachard
或订阅我的时事通讯：https://chrisachard.com/newsletter/

感谢阅读！