1. 首页

【译】基于Hooks 的 Redux 速成课

图1.png

你对 Redux 感到困惑吗?
如果使用新的 Redux Hooks,会更加简单!
这里是一个关于 Redux 的速成班,将配合 React 函数组件使用:

原文:Redux Crash Course with Hooks ?
作者:Chris Achard
译者:博轩
为保证文章的可读性,本文采用意译

1.

Redux 使您可以集中存放 JavaScript 应用程序的状态(数据)

它最常与 React 一起使用(通过 react-redux )

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

切片 2.png

2.

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

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

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

切片 3.png

3.

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

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

切片 4.png

4.

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

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

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

切片 5.png

5.

action 是普通的 JavaScript 对象

所有 action 均应具有 “type”

它们可能还具有其他键(参数)

切片 6.png

6.

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

切片 7.png

7.

要更改 store 中的数据,请首先编写您的 reducer:

reducer 通常使用 switch / case 语句编写,但不是必要的

他们只需要得到一个动作和一个状态,然后返回一个新状态

切片 8.png

8.

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

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

切片 9.png

9.

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

用一个 action 对象来调用 useDispatch

将传入 reducers 函数并运行,

有可能改变应用的状态

切片 10.png

10.

所有连接的组件(调用 useSelector )将自动获得新的状态

就像 props 或者 state 改变一样 – useSelector 将自动检测更改,React 将重新渲染组件。

总结

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

  • 1、 向 store 发送 action
  • 2、 通过 reducer 可能会或可能不会改变状态
  • 3、 使用选择器访问状态
  • 4、 状态的改变将自动重新刷新您的应用

?

codeandbox 示例代码

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【译】基于Hooks 的 Redux 速成课

链接:https://www.javascriptc.com/1822.html

原文链接:https://segmentfault.com/a/1190000020747009

« ES6读书笔记汇总系列(一)
7 个沙雕又带有陷阱的 JS 面试题»
Flutter 中文教程资源

相关推荐

QR code