学习资源
¥Learning Resources
Redux 文档旨在教授 Redux 的基本概念,并解释在实际应用中使用的关键概念。然而,文档并不能涵盖所有内容。令人高兴的是,还有许多其他很棒的资源可用于学习 Redux。我们鼓励你检查一下。其中许多内容涵盖了超出文档范围的主题,或者以可能更适合你的学习风格的其他方式描述相同的主题。
¥The Redux docs are intended to teach the basic concepts of Redux, as well as explain key concepts for use in real-world applications. However, the docs can't cover everything. Happily, there are many other great resources available for learning Redux. We encourage you to check them out. Many of them cover topics that are beyond the scope of the docs, or describe the same topics in other ways that may work better for your learning style.
本页面包含我们推荐的一些可用于学习 Redux 的最佳外部资源。有关 React、Redux、Javascript 和相关主题的教程、文章和其他资源的更多详细列表,请参阅 React/Redux 链接列表。
¥This page includes our recommendations for some of the best external resources available to learn Redux. For an additional extensive list of tutorials, articles, and other resources on React, Redux, Javascript, and related topics, see the React/Redux Links list.
基本介绍
¥Basic Introductions
教授 Redux 基本概念以及如何使用它的教程
¥Tutorials that teach the basic concepts of Redux and how to use it
React、Redux 和 TypeScript 简介
https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
Redux 维护者 Mark Erikson 的幻灯片,涵盖了 React、Redux 和 TypeScript 的基础知识。Redux 主题包括存储、reducer、中间件、React-Redux 和 Redux Toolkit。¥Intro to React, Redux, and TypeScript
https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
Redux maintainer Mark Erikson's slideset that covers the basics of React, Redux, and TypeScript. Redux topics include stores, reducers, middleware, React-Redux, and Redux Toolkit.学习现代 Redux - Redux 工具包、React-Redux Hooks 和 RTK 查询
https://www.learnwithjason.dev/let-s-learn-modern-redux
"和杰森一起学习" 节目的一集,Redux 维护者 Mark Erikson 作为嘉宾。本集介绍了一个实时编码的应用,并展示了如何创建新的 React+TS 项目、添加 Redux 包以及从头开始设置 Redux Toolkit 和 React-Redux(包括我们推荐的 TS hooks 配置)。它还展示了如何使用即将推出的 RTK 查询数据获取 API 并在 UI 中显示该数据。¥Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query
https://www.learnwithjason.dev/let-s-learn-modern-redux
An episode of the "Learn with Jason" show, with Redux maintainer Mark Erikson as guest. The episode features a live-coded app, and shows how to create a new React+TS project, add the Redux packages, and set up Redux Toolkit and React-Redux from scratch (including our recommended TS hooks configuration). It also shows how to use the upcoming RTK Query data fetching API and display that data in a UI.Redux 教程:概述和演练
https://www.taniarascia.com/redux-react-guide/
Tania Rascia 写得很好的教程,快速解释了关键的 Redux 概念,并展示了如何使用 vanilla Redux 和 Redux Toolkit 组合一个基本的 Redux + React 应用。¥Redux Tutorial: An Overview and Walkthrough
https://www.taniarascia.com/redux-react-guide/
A well-written tutorial from Tania Rascia that quickly explains key Redux concepts, and shows how to put together a basic Redux + React app using vanilla Redux and Redux Toolkit.初学者 Redux - 脑力友好的 Redux 学习指南
https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
一个易于理解的教程,使用 Redux Toolkit 和 React-Redux 构建一个小型待办事项应用,包括数据获取。¥Redux for Beginners - The Brain-Friendly Guide to Learning Redux
https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
An easy-to-follow tutorial that builds a small todo app with Redux Toolkit and React-Redux, including data fetching.使用 Redux Toolkit 和 TypeScript 轻松实现 Redux
https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
一个有用的教程,展示了如何一起使用 Redux Toolkit 和 TypeScript 来编写 Redux 应用,以及 RTK 如何简化典型的 Redux 使用。¥Redux made easy with Redux Toolkit and TypeScript
https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
A helpful tutorial that shows how to use Redux Toolkit and TypeScript together to write Redux applications, and how RTK simplifies typical Redux usage.还原:从 Twitter 炒作到生产
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
制作精良的幻灯片,直观地介绍了 Redux 核心概念、React 的使用、项目组织以及 thunk 和 sagas 的副作用。有一些很好的动画图,展示了数据如何流经 React+Redux 架构。¥Redux: From Twitter Hype to Production
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
A well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some good animated diagrams demonstrating how data flows through a React+Redux architecture.
将 Redux 与 React 结合使用
¥Using Redux With React
React-Redux 绑定库的说明
¥Explanations of the React-Redux bindings library
使用 React-Redux Hooks 现代化旧版 Redux 应用
https://app.egghead.io/playlists/modernizing-a-legacy-redux-application-with-react-hooks-c528
该视频系列展示了早期connect
API 和较新的 React-Redux hooks API 之间的差异,以及如何在组件中使用这些钩子。¥Modernizing a Legacy Redux Application with React-Redux Hooks
https://app.egghead.io/playlists/modernizing-a-legacy-redux-application-with-react-hooks-c528
A video series that shows the differences between the earlierconnect
API and the newer React-Redux hooks API, and how to use those hooks in your components.为什么 Redux 在 React 应用中很有用
https://www.fullstackreact.com/articles/redux-with-mark-erikson/
解释将 Redux 与 React 结合使用的一些好处,包括在组件之间共享数据和热模块重新加载。¥Why Redux is Useful in React Apps
https://www.fullstackreact.com/articles/redux-with-mark-erikson/
An explanation of some of the benefits of using Redux with React, including sharing data between components and hot module reloading.
基于项目的教程
¥Project-Based Tutorials
通过构建项目(包括更大的 "real-world" 类型应用)来教授 Redux 概念的教程
¥Tutorials that teach Redux concepts by building projects, including larger "real-world"-type applications
实用 Redux
https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
https://blog.isquaredsoftware.com/series/practical-redux/
一系列正在进行的帖子,旨在通过构建示例应用来演示许多特定的 Redux 技术,该示例应用基于用于管理 Battletech 战役的 MekHQ 应用。由 Redux 联合维护者 Mark Erikson 编写。涵盖的主题包括管理关系数据、连接多个组件和列表、功能的复杂化简器逻辑、处理表单、显示模式对话框等等。(注意:这是一个较旧的系列,今天我们推荐编写 Redux 代码的较新模式。但是,本系列中的许多原则仍然很有价值。)¥Practical Redux
https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
https://blog.isquaredsoftware.com/series/practical-redux/
An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample application, based on the MekHQ application for managing Battletech campaigns. Written by Redux co-maintainer Mark Erikson. Covers topics like managing relational data, connecting multiple components and lists, complex reducer logic for features, handling forms, showing modal dialogs, and much more. (Note: this is an older series, and today we recommend newer patterns for writing Redux code. However, many of the principles in this series are still valuable.)
Redux 实现
¥Redux Implementation
通过编写微型重新实现来解释 Redux 内部如何工作
¥Explanations of how Redux works internally, by writing miniature reimplementations
Redux 入门 - 视频系列
https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
https://github.com/tayiorbeii/egghead.io_redux_course_notes
Redux 的创建者 Dan Abramov 在 30 个短视频(2-5 分钟)中演示了各种概念。链接的 Github 存储库包含视频的注释和转录。¥Getting Started with Redux - Video Series
https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
https://github.com/tayiorbeii/egghead.io_redux_course_notes
Dan Abramov, the creator of Redux, demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos.使用惯用的 Redux 构建 React 应用 - 视频系列
https://egghead.io/courses/building-react-applications-with-idiomatic-redux
https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes
Dan Abramov 的第二个视频教程系列,紧接第一个视频教程系列。包括有关存储初始状态、将 Redux 与 React Router 结合使用、使用 "selector" 函数、规范化状态、Redux 中间件的使用、异步操作创建器等的课程。链接的 Github 存储库包含视频的注释和转录。¥Building React Applications with Idiomatic Redux - Video Series
https://egghead.io/courses/building-react-applications-with-idiomatic-redux
https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes
Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos.实时反应:热重载和时间旅行
https://youtube.com/watch?v=xsSnOQynTHs
Dan Abramov 最初的介绍 Redux 的会议演讲。了解 Redux 强制执行的约束如何使时间旅行的热重载变得容易¥Live React: Hot Reloading and Time Travel
https://youtube.com/watch?v=xsSnOQynTHs
Dan Abramov's original conference talk that introduced Redux. See how constraints enforced by Redux make hot reloading with time travel easy自己构建 Redux
https://zapier.com/engineering/how-to-build-redux/
一篇优秀的深入 "构建一个迷你 Redux" 文章,不仅涵盖了 Redux 的核心,还涵盖了connect
和中间件。¥Build Yourself a Redux
https://zapier.com/engineering/how-to-build-redux/
An excellent in-depth "build a mini-Redux" article, which covers not only Redux's core, but alsoconnect
and middleware as well.Connect.js 解释
https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
React Redux 的connect()
函数的非常简化的版本,说明了基本实现¥Connect.js explained
https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
A very simplified version of React Redux'sconnect()
function that illustrates the basic implementation让我们来写 Redux!
https://www.jamasoftware.com/blog/lets-write-redux/
逐步逐步编写 Redux 的微型版本,以帮助解释概念和实现。¥Let's Write Redux!
https://www.jamasoftware.com/blog/lets-write-redux/
Walks through writing a miniature version of Redux step-by-step, to help explain the concepts and implementation.
Reducer
讨论编写 reducer 函数的方法的文章
¥Articles discussing ways to write reducer functions
利用
combineReducers
https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
多次使用combineReducers
生成状态树的示例,以及对各种 reducer 逻辑方法的权衡的一些想法。¥Taking Advantage of
combineReducers
https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
Examples of usingcombineReducers
multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic.高阶 reducer 的力量
https://slides.com/omnidan/hor#/
redux-undo 和其他库的作者的幻灯片,解释了高阶 reducer 的概念以及如何使用它们¥The Power of Higher-Order Reducers
https://slides.com/omnidan/hor#/
A slideshow from the author of redux-undo and other libraries, explaining the concept of higher-order reducers and how they can be used具有高阶 Reducer 的 Reducer 组合
https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f
一些编写小函数的好例子,这些函数可以组合在一起以执行更大的特定 Reducer 任务,例如提供初始状态、过滤、更新特定键等。¥Reducer composition with Higher Order Reducers
https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f
Some great examples of writing small functions that can be composed together to perform larger specific reducer tasks, such as providing initial state, filtering, updating specific keys, and more.高阶 reducer - 听起来很可怕
https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705
解释了如何像乐高积木一样组合 reducer 来创建可重用和可测试的 reducer 逻辑。¥Higher Order Reducers - It just sounds scary
https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705
Explains how reducers can be composed like Lego bricks to create reusable and testable reducer logic.
选择器
¥Selectors
关于如何以及为何使用选择器函数从状态读取值的说明
¥Explanations of how and why to use selector functions to read values from state
惯用的还原:使用 Reselect 选择器实现封装和性能
https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
完整指南,介绍为什么应将选择器函数与 Redux 结合使用、如何使用 Reselect 库编写优化的选择器以及提高性能的高级技巧。¥Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance
https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
A complete guide to why you should use selector functions with Redux, how to use the Reselect library to write optimized selectors, and advanced tips for improving performance.ReactCast#8:Redux 中的选择器
https://www.youtube.com/watch?v=frT3to2ACCw
很好地概述了为什么以及如何使用选择器函数从存储中检索数据,并从存储值中派生附加数据¥ReactCasts #8: Selectors in Redux
https://www.youtube.com/watch?v=frT3to2ACCw
A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values使用 Reselect 优化 React Redux 应用开发
https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/
关于 Reselect 的一个很好的教程。涵盖了 "选择器功能" 的概念、如何使用 Reselect 的 API 以及如何使用记忆选择器来提高性能。¥Optimizing React Redux Application Development with Reselect
https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/
A good tutorial on Reselect. Covers the concept of "selector functions", how to use Reselect's API, and how to use memoized selectors to improve performance.在 React-Redux 应用中使用 Reselect
https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application
讨论记忆选择器对于性能的重要性,以及使用 Reselect 的良好实践。¥Usage of Reselect in a React-Redux Application
https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application
Discusses the importance of memoized selectors for performance, and good practices for using Reselect.React、Reselect 和 Redux
https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
解释 Reselect 的记忆选择器函数如何在 Redux 应用中发挥作用,以及如何为每个组件实例创建唯一的选择器实例。¥React, Reselect, and Redux
https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance.
正常化
¥Normalization
如何像数据库一样构建 Redux 存储以获得最佳性能
¥How to structure the Redux store like a database for best performance
查询 Redux 存储
https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
了解在 Redux 中组织和存储数据的最佳实践,包括标准化数据和使用选择器函数。¥Querying a Redux Store
https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions.规范化 Redux 存储以实现最大程度的代码重用
https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
关于规范化 Redux 存储如何实现一些有用的数据处理方法的思考,以及使用选择器函数来非规范化分层数据的示例。¥Normalizing Redux Stores for Maximum Code Reuse
https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
Thoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data.高级 Redux 实体规范化
https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
描述用于跟踪状态实体子集的 "keyWindow" 概念,类似于 SQL "view"。对标准化数据概念的有用扩展。¥Advanced Redux Entity Normalization
https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data.
中间件
¥Middleware
中间件如何工作以及如何编写它们的解释和示例
¥Explanations and examples of how middleware work and how to write them
探索 Redux 中间件
https://blog.krawaller.se/posts/exploring-redux-middleware/
通过一系列小实验了解中间件¥Exploring Redux Middlewares
https://blog.krawaller.se/posts/exploring-redux-middleware/
Understanding middlewares through a series of small experimentsRedux 中间件教程
https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md
概述什么是中间件、applyMiddleware
如何工作以及如何编写中间件。¥Redux Middleware Tutorial
https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md
An overview of what middleware is, howapplyMiddleware
works, and how to write middleware.ReactCast#6:Redux 中间件
https://www.youtube.com/watch?v=T-qtHI1qHIg
描述中间件如何融入 Redux、其用途以及如何实现自定义中间件的截屏视频¥ReactCasts #6: Redux Middleware
https://www.youtube.com/watch?v=T-qtHI1qHIg
A screencast that describes how middleware fit into Redux, their uses, and how to implement a custom middlewareRedux 中间件初学者指南
https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware
中间件用例的有用解释,包含大量示例¥A Beginner's Guide to Redux Middleware
https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware
A useful explanation of middleware use cases, with numerous examplesJavascript 中的函数组合
https://joecortopassi.com/articles/functional-composition-in-javascript/
分解compose
函数的工作原理¥Functional Composition in Javascript
https://joecortopassi.com/articles/functional-composition-in-javascript/
Breaking down how thecompose
function works
副作用 - 基本
¥Side Effects - Basics
Redux 中处理异步行为的介绍
¥Introductions to handling async behavior in Redux
堆栈溢出:使用超时调度 Redux 操作
https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan Abramov 解释了在 Redux 中管理异步行为的基础知识,逐步介绍了一系列渐进的方法(内联异步调用、异步操作创建器、thunk 中间件)。¥Stack Overflow: Dispatching Redux Actions with a Timeout
https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan Abramov explains the basics of managing async behavior in Redux, walking through a progressive series of approaches (inline async calls, async action creators, thunk middleware).堆栈溢出:为什么 Redux 中的异步流程需要中间件?
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov 给出了使用 thunk 和异步中间件的原因,以及一些使用 thunk 的有用模式。¥Stack Overflow: Why do we need middleware for async flow in Redux?
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov gives reasons for using thunks and async middleware, and some useful patterns for using thunks."thunk" 到底是什么?
https://daveceddia.com/what-is-a-thunk/
快速解释 "thunk" 这个词的一般含义,以及 Redux 的具体含义。¥What the heck is a "thunk"?
https://daveceddia.com/what-is-a-thunk/
A quick explanation for what the word "thunk" means in general, and for Redux specifically.Redux 中的 Thunks:基础知识
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
详细了解 thunk 是什么、它们解决什么问题以及如何使用它们。¥Thunks in Redux: The Basics
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
A detailed look at what thunks are, what they solve, and how to use them.
副作用 - 高级
¥Side Effects - Advanced
用于管理异步行为的高级工具和技术
¥Advanced tools and techniques for managing async behavior
在 Redux 中进行异步操作的正确方法是什么?
https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/
很好地了解了最流行的 Redux 副作用库,并对每个库的工作原理进行了比较。¥What is the right way to do asynchronous operations in Redux?
https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/
An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works.Redux 4 Ways
https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
使用 thunk、sagas、observable 和 Promise 中间件实现一些基本数据获取的并行比较¥Redux 4 Ways
https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
Side-by-side comparisons of implementing some basic data fetching using thunks, sagas, observables, and a promise middleware惯用的还原:关于 Thunk、Sagas、抽象和可重用性的思考
https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
对几个 "thunks 很糟糕" 问题的回应,认为 thunk(和 Sagas)仍然是管理复杂同步逻辑和异步副作用的有效方法。¥Idiomatic Redux: Thoughts on Thunks, Sagas, Abstractions, and Reusability
https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
A response to several "thunks are bad" concerns, arguing that thunks (and sagas) are still a valid approach for managing complex sync logic and async side effects.JavaScript 电动工具:Redux-Saga
https://formidable.com/blog/2017/javascript-power-tools-redux-saga/
https://formidable.com/blog/2017/composition-patterns-in-redux-saga/
https://formidable.com/blog/2017/real-world-redux-saga-patterns/
这是一个精彩的系列,讲述了 Redux-Saga 背后的概念、实现和好处,包括如何使用 ES6 生成器来控制函数流, 如何将 sagas 组合在一起以实现并发,以及 sagas 的实际用例。¥Javascript Power Tools: Redux-Saga
https://formidable.com/blog/2017/javascript-power-tools-redux-saga/
https://formidable.com/blog/2017/composition-patterns-in-redux-saga/
https://formidable.com/blog/2017/real-world-redux-saga-patterns/
A fantastic series that teaches the concepts, implementation, and benefits behind Redux-Saga, including how ES6 generators are used to control function flow, how sagas can be composed together to accomplish concurrency, and practical use cases for sagas.探索 Redux Sagas
https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
一篇优秀的文章,探讨了如何使用 sagas 提供粘合层来在 Redux 应用中实现解耦的业务逻辑。¥Exploring Redux Sagas
https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
An excellent article that explores how to use sagas to provide a glue layer to implement decoupled business logic in a Redux application.使用 Sagas 驯服 Redux
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
Redux-Saga 的良好概述,包括有关生成器功能、saga 用例、使用 sagas 处理 Promise 以及测试 sagas 的信息。¥Taming Redux with Sagas
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
A good overview of Redux-Saga, including info on generator functions, use cases for sagas, using sagas to deal with promises, and testing sagas.RxJS 的响应式 Redux 状态
https://ivanjov.com/reactive-redux-state-with-rxjs/
描述 "反应式编程" 和 RxJS 库的概念,并展示如何使用 redux-observable 获取数据以及测试示例。¥Reactive Redux State with RxJS
https://ivanjov.com/reactive-redux-state-with-rxjs/
Describes the concept of "Reactive Programming" and the RxJS library, and shows how to use redux-observable to fetch data, along with examples of testing.使用 redux-observable 处理 Redux 中的异步逻辑
https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
一篇扩展文章,比较处理画线示例的基于 thunk 的实现与基于 observable 的实现。¥Using redux-observable to handle asynchronous logic in Redux
https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation.
Redux 中的思考
¥Thinking in Redux
更深入地了解 Redux 的用途以及它为何如此工作
¥Deeper looks at how Redux is meant to be used, and why it works the way it does
何时(以及何时不)使用 Redux
https://changelog.com/posts/when-and-when-not-to-reach-for-redux
Redux 维护者 Mark Erikson 描述了 Redux 的创建目的是要解决的问题,以及它与其他常用工具的比较。¥When (and when not) to reach for Redux
https://changelog.com/posts/when-and-when-not-to-reach-for-redux
Redux maintainer Mark Erikson describes the problems Redux was created to solve, and how it compares to other commonly used tools.
你可能不需要 Redux
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Dan Abramov 讨论了使用 Redux 时涉及的权衡。¥You Might Not Need Redux
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Dan Abramov discusses the tradeoffs involved in using Redux.惯用的还原:Redux 之道,第 1 部分 - 实现和意图
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/
深入探讨 Redux 的实际工作原理、它要求你遵循的约束以及其设计和使用背后的意图。¥Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/
A deep dive into how Redux actually works, the constraints it asks you to follow, and the intent behind its design and usage.惯用的还原:Redux 之道,第 2 部分 - 实践和哲学
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
后续研究为什么存在常见的 Redux 使用模式、Redux 的其他使用方式以及对这些不同模式和方法的优缺点的思考。¥Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
A follow-up look at why common Redux usage patterns exist, other ways that Redux can be used, and thoughts on the pros and cons of those different patterns and approaches.Redux 有什么了不起的?
https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
深入而引人入胜地分析了 Redux 与 OOP 和消息传递的比较,典型的 Redux 用法如何转向具有更多样板的类似 Java 的 "setter" 函数,以及对更高级别的请求 Redux 之上的 "blessed" 抽象使新手更容易使用和学习。非常值得一读。¥What's So Great About Redux?
https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies. Very worth reading.
Redux 架构
¥Redux Architecture
构建大型 Redux 应用的模式和实践
¥Patterns and practices for structuring larger Redux applications
构建应用状态时避免意外的复杂性
https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
一套用于组织 Redux 存储结构的优秀指南。¥Avoiding Accidental Complexity When Structuring Your App State
https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
An excellent set of guidelines for organizing your Redux store structure.Redux 一步一步:现实生活应用的简单而强大的工作流程
https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092
"意外的复杂性" 文章的后续文章,讨论原理¥Redux Step by Step: A Simple and Robust Workflow for Real Life Apps
https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092
A follow-up to the "Accidental Complexity" article, discussing principle我希望我了解 Redux 的事情
https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0
https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/
在使用 Redux 构建应用后学到的一些出色的技巧和经验教训。包括有关连接组件、选择数据和应用/项目结构的信息。Reddit 上的其他讨论。¥Things I Wish I Knew About Redux
https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0
https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/
A number of excellent tips and lessons learned after building an app with Redux. Includes info on connecting components, selecting data, and app/project structure. Additional discussion on Reddit.反应+Redux:清洁、可靠和可维护代码的提示和最佳实践
https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code
一个出色的幻灯片,包含各种提示和建议,包括保持操作创建者的简单性和 reducer 中的数据操作、抽象 API 调用、避免 传播属性等等。¥React+Redux: Tips and Best Practices for Clean, Reliable, & Maintainable Code
https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code
An excellent slideshow with a wide variety of tips and suggestions, including keeping action creators simple and data manipulation in reducers, abstracting away API calls, avoiding spreading props, and more.用于大型 Web 应用中的状态管理的 Redux
https://blog.mapbox.com/redux-for-state-management-in-large-web-apps-c7f3fab3ce9b
惯用的 Redux 架构的精彩讨论和示例,以及 Mapbox 如何将这些方法应用到其 Mapbox Studio 应用中。¥Redux for state management in large web apps
https://blog.mapbox.com/redux-for-state-management-in-large-web-apps-c7f3fab3ce9b
Excellent discussion and examples of idiomatic Redux architecture, and how Mapbox applies those approaches to their Mapbox Studio application.
应用和示例
¥Apps and Examples
React-Redux 现实世界示例:TodoMVC for the Real World
https://github.com/GoThinkster/redux-review
使用 Redux 构建的示例全栈 "真实世界" 应用。演示一个类似 Medium 的社交博客网站,其中包括 JWT 身份验证、CRUD、收藏文章、关注用户、路由等。RealWorld 项目还包括站点前端和后端的许多其他实现,专门用于展示同一项目和 API 规范的不同服务器和客户端实现如何相互比较。¥React-Redux RealWorld Example: TodoMVC for the Real World
https://github.com/GoThinkster/redux-review
An example full-stack "real world" application built with Redux. Demos a Medium-like social blogging site that includes JWT authentication, CRUD, favoriting articles, following users, routing, and more. The RealWorld project also includes many other implementations of the front and back ends of the site, specifically intended to show how different server and client implementations of the same project and API spec compare with each other.Project Mini-Mek
https://github.com/markerikson/project-minimek
一个示例应用,用于演示各种有用的 Redux 技术,伴随着 https://blog.isquaredsoftware.com/series/practical-redux 的 "实用的 Redux" 博客系列¥Project Mini-Mek
https://github.com/markerikson/project-minimek
A sample app to demonstrate various useful Redux techniques, accompanying the "Practical Redux" blog series at https://blog.isquaredsoftware.com/series/practical-reduxreact-redux-yelp-clone
https://github.com/mohamed-ismat/react-redux-yelp-clone
FullStackReact 对 "叫喊克隆" 应用的改编。它通过使用 Redux 和 Redux Saga 而不是本地状态以及 React Router v4、样式组件和其他现代标准来扩展原始版本。基于 React-Boilerplate 入门套件。¥react-redux-yelp-clone
https://github.com/mohamed-ismat/react-redux-yelp-clone
An adaptation of the "Yelp Clone" app by FullStackReact. It extends the original by using Redux and Redux Saga instead of local state, as well as React Router v4, styled-components, and other modern standards. Based on the React-Boilerplate starter kit.WordPress-Calypso
https://github.com/Automattic/wp-calypso
由 JavaScript 和 API 驱动的全新 WordPress.com¥WordPress-Calypso
https://github.com/Automattic/wp-calypso
The new JavaScript- and API-powered WordPress.comSound-Redux
https://github.com/andrewngu/sound-redux
使用 React / Redux 构建的 Soundcloud 客户端¥Sound-Redux
https://github.com/andrewngu/sound-redux
A Soundcloud client built with React / ReduxWebamp
https://webamp.org
https://github.com/captbaritone/webamp
Winamp2 的浏览器内重建,使用 React 和 Redux 构建。实际上播放 MP3,并允许你加载本地 MP3 文件。¥Webamp
https://webamp.org
https://github.com/captbaritone/webamp
An in-browser recreation of Winamp2, built with React and Redux. Actually plays MP3s, and lets you load in local MP3 files.Tello
https://github.com/joshwcomeau/Tello
一种简单而愉快的方式来跟踪和管理电视节目¥Tello
https://github.com/joshwcomeau/Tello
A simple and delightful way to track and manage TV showsio-808
https://github.com/vincentriemer/io-808
尝试完全重新创建基于网络的 TR-808 鼓机¥io-808
https://github.com/vincentriemer/io-808
An attempt at a fully recreated web-based TR-808 drum machine
Redux 文档翻译
¥Redux Docs Translations
中文文档 - 中文
¥中文文档 — Chinese
繁體中文文件 - 繁体中文
¥繁體中文文件 — Traditional Chinese
Redux 俄语 - 俄语
¥Redux in Russian — Russian
西班牙语版 Redux - 西班牙语
¥Redux en Español - Spanish
Redux 韩语 - 韩国人
¥Redux in Korean - Korean
图书
¥Books
Redux in Action
https://www.manning.com/books/redux-in-action
一本全面的书,涵盖了使用 Redux 的许多关键方面,包括 reducer 和操作的基础知识以及与 React 的使用、复杂的中间件和副作用、应用结构、性能、测试和 多得多。很好地解释了使用 Redux 的多种方法的优缺点和权衡。由 Redux 联合维护者 Mark Erikson 亲自推荐。¥Redux in Action
https://www.manning.com/books/redux-in-action
A comprehensive book that covers many key aspects of using Redux, including the basics of reducers and actions and use with React, complex middlewares and side effects, application structure, performance, testing, and much more. Does a great job of explaining the pros, cons, and tradeoffs of many approaches to using Redux. Personally recommended by Redux co-maintainer Mark Erikson.完整的 Redux 书
https://leanpub.com/redux-book
如何管理生产中的大型状态?为什么我需要存储增强剂?处理表单验证的最佳方法是什么?使用简单的术语和示例代码获得所有这些问题以及更多问题的答案。了解使用 Redux 构建复杂且可投入生产的 Web 应用所需的一切。(注:现在永久免费!)¥The Complete Redux Book
https://leanpub.com/redux-book
How do I manage a large state in production? Why do I need store enhancers? What is the best way to handle form validations? Get the answers to all these questions and many more using simple terms and sample code. Learn everything you need to use Redux to build complex and production-ready web applications. (Note: now permanently free!)Taming the State in React
https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
如果你已经通过作者之前的《React 学习之路》一书学习了 React,Taming the State in React 将是学习基础状态和高级状态的完美结合 React 中的管理。你将开始只学习 Redux,而不学习 React。随后,本书将向你展示如何将 Redux 连接到你的 React 应用。高级章节将教你有关规范化、命名、选择器和异步操作的知识。最后,你将使用 React 和 Redux 设置并构建一个现实世界的应用。¥Taming the State in React
https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
If you have learned React with the previous book of the author called The Road to learn React, Taming the State in React will be the perfect blend to learn about basic and advanced state management in React. You will start out with learning only Redux without React. Afterward, the book shows you how to connect Redux to your React application. The advanced chapters will teach you about normalization, naming, selectors and asynchronous actions. In the end, you will set up and build a real world application with React and Redux.
课程
¥Courses
现代 React 与 Redux,作者:Stephen Grider(付费)
https://www.udemy.com/react-redux/
在使用 React Router、Webpack 和 ES2015 开发应用时,通过本教程掌握 React 和 Redux 的基础知识。本课程将帮助你快速上手并运行,并教你深入理解和构建 React 组件以及使用 Redux 构建应用所需的核心知识。¥Modern React with Redux, by Stephen Grider (paid)
https://www.udemy.com/react-redux/
Master the fundamentals of React and Redux with this tutorial as you develop apps with React Router, Webpack, and ES2015. This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build React components and structure applications with Redux.Redux,作者:Tyler McGinnis(付费)
https://tylermcginnis.com/courses/redux/
在学习 Redux 时,你需要在足够大的应用环境中学习它才能看到好处。这就是为什么这个课程很大。更好的名字可能是 "现实世界的回归"。如果你厌倦了 "待办事项清单" Redux 教程,那么你来对地方了。在本课程中,我们将讨论 Redux 为何特别适合管理应用中的状态。我们将构建一个实际的 "真实世界" 应用,以便你可以了解 Redux 如何处理乐观更新和错误处理等边缘情况。我们还将介绍许多与 Redux、Firebase 和 CSS 模块配合良好的其他技术。¥Redux, by Tyler McGinnis (paid)
https://tylermcginnis.com/courses/redux/
When learning Redux, you need to learn it in the context of an app big enough to see the benefits. That's why this course is huge. A better name might be "Real World Redux". If you're sick of "todo list" Redux tutorials, you've come to the right place. In this course we'll talk all about what makes Redux special for managing state in your application. We'll build an actual "real world" application so you can see how Redux handles edge cases like optimistic updates and error handling. We'll also cover many other technologies that work well with Redux, Firebase, and CSS Modules.学习 Redux,作者:Wes Bos(免费)
https://learnredux.com/
一个视频课程,介绍如何构建 '回归斯塔格拉姆' — 一个简单的照片应用,将简化 Redux、React Router 和 React.js 背后的核心思想¥Learn Redux, by Wes Bos (free)
https://learnredux.com/
A video course that walks through building 'Reduxstagram' — a simple photo app that will simplify the core ideas behind Redux, React Router and React.js
更多资源
¥More Resources
React-Redux 链接 是 React、Redux、ES2015 等的高质量文章、教程和相关内容的精选列表。
¥React-Redux Links is a curated list of high-quality articles, tutorials, and related content for React, Redux, ES2015, and more.
Redux 生态系统链接 是 Redux 相关库、插件和实用程序的分类集合。
¥Redux Ecosystem Links is a categorized collection of Redux-related libraries, addons, and utilities.
很棒的 Redux 是 Redux 相关存储库的广泛列表。
¥Awesome Redux is an extensive list of Redux-related repositories.
开发社区 是一个分享 Redux 项目、文章和教程,以及开始讨论和寻求 Redux 相关主题反馈的地方。欢迎各种技能水平的开发者参加。
¥DEV Community is a place to share Redux projects, articles and tutorials as well as start discussions and ask for feedback on Redux-related topics. Developers of all skill-levels are welcome to take part.