【译】基于Hooks 的 Redux 速成课

原文： Redux Crash Course with Hooks 🎣
做者：Chris Achard
译者：博轩
为保证文章的可读性，本文采用意译

你对 Redux 感到困惑吗？
若是使用新的 Redux Hooks，会更加简单！
这里是一个关于 Redux 的速成班，将配合 React 函数组件使用：

1.

Redux 使您能够集中存放 JavaScript 应用程序的状态（数据）

它最常与 React 一块儿使用（经过 react-redux ）

这使您能够从树中的任何组件访问或更改状态。

2.

应用的状态被集中存放于 Redux store

该 store 是使用称为 “reducer” 的函数所建立的

reducer 接受一个 state 和一个 action ，
并返回相同或新的状态

3.

使用 react-redux 中的 Provider 来为你的应用提供 store。

使用 Provider 来包装你的应用入口，以便应用程序中的任何组件均可以访问 store 中的数据

4.

要从 store 中取出数据，请使用 react-redux 提供的自定义 hook ：useSelector 。

selector 只是一个有趣的词：“从 store 获取数据的功能”

而后，向 useSelector 中传入回调，该回调中可获取整个 redux 的状态，您只需选择该组件所需的内容

5.

action 是普通的 JavaScript 对象

全部 action 均应具备 “type” 键

它们可能还具备其余键（参数）

6.

Actions 不是“调用”的，而是“分配”给 reducer 的
Action 的 type 属性告诉 reducer 接下来该作什么 （返回新状态或旧状态）

7.

要更改 store 中的数据，请首先编写您的 reducer：

reducer 一般使用 switch / case 语句编写，但不是必要的

他们只须要获得一个动做和一个状态，而后返回一个新状态

8.

重要的是，reducer 返回一个新的状态对象（而不是修改旧的对象的属性），这样，当对象中的属性发生某些改变时，组件将从新渲染。

不要在 reducer 中修改 state 中的值，仅返回一个值已经更改的拥有新状态的对象。

9.

要分派 action ，请使用 react-redux 中的自定义 hook： useDispatch

用一个 action 对象来调用 useDispatch，

将传入 reducers 函数并运行，

有可能改变应用的状态

10.

全部链接的组件（调用 useSelector ）将自动得到新的状态

就像 props 或者 state 改变同样 - useSelector 将自动检测更改，React 将从新渲染组件。

总结

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

• 一、 向 store 发送 action
• 二、 经过 reducer 可能会或可能不会改变状态
• 三、 使用选择器访问状态
• 四、 状态的改变将自动从新刷新您的应用

💯

codeandbox 示例代码