React Status 中文周刊 #38 - Redux 4.1 版本发布

编辑 | whatwewant 

         edison-hm 

         QC-L

大家五一快乐啊，假期虽好，别忘记学习哟~

本周 Redux 发布了 4.1 版本，虽然不是大版本更新，但是也引入了很多不错的特性。比如 bundle 大小缩减了 40%，优化了错误提示等。还附有很多最佳实践，具体内容小伙伴们看文章吧~

电脑阅读，请点击阅读原文或直接访问 https://docschina.org/weekly/react

🔥 本周热门

React Table 指南及其最佳实践 — 社区有很多和 React Table 相关的库。本文主要聚焦 React Table，然后再向你介绍其他可能更符合特殊需求的库。

长按识别二维码查看原文   

https://flatlogic.com/blog/react-tables-guide-and-best-examples/

Eugene Stepnov

Redux 4.1 版本发布 — 对于 Redux 来说，这并非是大版本更新，但是，很多方面都得到了改善，比如，bundle 大小缩减了近 40%，错误信息也得到了改进。同时，Redux Toolkit 也迎来了 1.6.0 的第一个 alpha 版本，它集成了 RTK Query，一款为 Redux 而建立的数据请求及缓存库。

长按识别二维码查看原文   

https://github.com/reduxjs/redux/releases/tag/v4.1.0

Mark Erikson

将 React 组件作为 TypeScript 函数的泛型 — 本文是一篇实操文。使用 TypeScript 泛型 提高 React 组件灵活性，同时也减少了所需的代码量。

长按识别二维码查看原文   

https://t.co/1Fq7h75TFH?amp=1

David Gilbertson

如何在 React 应用中构建内容的导航目录 — 本文教你如何快速为你的页面构建导航目录，方便浏览你的内容。

长按识别二维码查看原文   

https://www.emgoto.com/react-table-of-contents/

Emma Goto

📘 教程与趣事

React 代码整洁之道的 21 个最佳实践 — 每种技巧都有对应的代码片段，所有这些技巧都旨在改善你的代码质量。

长按识别二维码查看原文   

https://t.co/foz0nkgTUb?amp=1

Mohammad Faisal

在 React Native 中处理离线模式 — 尽管电信提供商希望我们相信网络无处不在，但是我们还是时常免不了遇上网络离线的情况。

长按识别二维码查看原文   

https://around25.com/blog/handling-offline-mode-in-react-native/

Ahsan Ali

如何将基于 React Router 的应用部署到 Netlify — Netlify 应用部署快速入门。

长按识别二维码查看原文   

https://www.freecodecamp.org/news/how-to-deploy-react-router-based-app-to-netlify/

Yogesh Chavan

使用 Stripe 构建 SaaS 平台 — 如果你的应用正好需要支付服务，那么本教程就是为你准备的。本文使用流行的 Stripe 支付服务，后端使用 Next.js，一步一步带你完成支付业务。

长按识别二维码查看原文   

https://jonmeyers.io/blog/build-a-saas-platform-with-stripe

Jon Meyers

基于 React 和 TypeScript 实现在 Google Sheets 中数据存储 — 不确定你的项目是否需要依赖数据库？这个简明的教程将告诉你如何将 React 表单数据发布到 Google Sheets 中。

长按识别二维码查看原文   

https://t.co/tdh4Cuitve?amp=1

Fakhreddine Messaoudi

如何将 Netlify 表单添加到使用 create-react-app 构建的 React 应用中 — 使用 create-react-app 创建单页应用（SPA）时，往往少不了后端数据服务，比如 Netlify，本文旨在教你如何将 Netlify 表单添加到你的应用中。

长按识别二维码查看原文   

https://www.freecodecamp.org/news/how-to-add-a-netlify-form-to-a-react-app/

Joseph Mawa

🛠  代码与工具

Replay 3.0：React 视频播放器 — 简单易用、完全可自定义、功能强大的 React 视频播放器组件。

长按识别二维码查看原文   

https://github.com/vimond/replay

Vimond Media Solutions

useSound：声音效果的 Hooks — 使用 Howler.js 添加听觉控制 UI。

长按识别二维码查看原文   

https://github.com/joshwcomeau/use-sound

Josh W. Comeau

调用 Native 功能的最佳 React Native 库 — 对于正在开发 React Native 的开发者，这套完整的工具库将会很有帮助。

长按识别二维码查看原文   

https://blog.logrocket.com/the-best-react-native-libraries-for-leveraging-native-features/

Youssouf El Azizi

Helix：React 的 ClojureScript Wrapper — 得益于 ClojureScript 可以将 Clojure 编译成 JavaScript，Helix 包装了 ClojureScript，也就意味着，可以使用 Clojure 开发 React 应用。

长按识别二维码查看原文   

https://github.com/lilactown/helix

Will Acton

next-translate：用于 Next.js 的 i18n 插件 — 轻松让你的 Next.js 应用支持国际化，吸引更多国际用户。

长按识别二维码查看原文   

https://github.com/vinissimus/next-translate

Vinissimus

GeoStyler：用于地图数据的通用样式管理器 — 用于地图样式设置的一整套 UI 组件。目前已经发布了 6 个大版本。

长按识别二维码查看原文   

https://github.com/geostyler/geostyler

GeoStyler

⚡️ 好库推荐：

你可能错过的有趣的项目：

• use-clipboard-copy — 复制到剪贴板的 Hooks
• React <Frame /> 组件 — 快速将你的应用封装到 iFrame 中
• React Live Chat 加载器 — 减轻第三方实时聊天应用对页面性能的影响
• React Hook Form 错误信息组件 — 简化错误信息的显示
• use-tus — 可恢复的文件上传 Hooks

🙋‍♂️ 关注我们

我们将为你带来最前沿的前端资讯。