Redux Tutorials

Basic Introductions

Redux Docs
https://redux.js.org/
The official Redux documentation. FANTASTIC writing - not just "here's the API", but "here's what you want to do and how we came up with this"
React-Redux Docs
https://react-redux.js.org
The official React-Redux documentation. Explains how to correctly use the React-Redux API, including details on writing mapState functions and dispatching actions.
Getting Started with Redux - Video Series
https://app.egghead.io/playlists/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.
Building React Applications with Idiomatic Redux - Video Series
https://app.egghead.io/series/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.
Modern Web Development with React and Redux
https://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/
An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.
What Does Redux Do? (and when should you use it?)
https://daveceddia.com/what-does-redux-do/
An excellent summary of how Redux helps solve data flow problems in a React app.
How Redux Works: A Counter-Example
https://daveceddia.com/how-does-redux-work/
A great follow-up to the previous article. It explains how to use Redux and React-Redux, by first showing a React component that stores a value in its internal state, and then refactoring it to use Redux instead. Along the way, the article explains important Redux terms and concepts, and how they all fit together to make the Redux data flow work properly.
Redux and React: An Introduction
https://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/
A great introduction to Redux's core concepts, with explanations of how to use the React-Redux package to use Redux with React.
React Redux Tutorial for Beginners: Learning Redux in 2018
https://www.valentinog.com/blog/react-redux-tutorial-beginners/
An excellent tutorial that covers a variety of Redux fundamentals, including a look at the problems Redux helps solve, when you should learn and use Redux, actions and reducers, the Redux store, and how to connect React components to Redux.
Single State Tree + Flux
https://merrickchristensen.com/articles/single-state-tree.html
Describes the benefits of a Flux architecture, and a single state tree like Redux has
Redux-Tutorial
https://github.com/happypoulp/redux-tutorial
A file-based tutorial to Redux (click on each numbered .js file in the repo)
Leveling Up with React: Redux
https://css-tricks.com/learning-react-redux/
A very well-written introduction to Redux and its related concepts, with some nifty cartoon-ish diagrams.
Functionally Managing State with Redux
https://wecodetheweb.com/2015/09/29/functionally-managing-state-with-redux/
A quick overview of Redux's core concepts, and how to use it with React
Redux: From Twitter Hype to Production
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
An extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture.
Redux diagrams
reduxjs/redux#653
A variety of user-provided diagrams illustrating how the pieces of Redux fit together.
How I Learned to Stop Worrying and Love Redux
https://medium.com/@shopsifter/how-i-learned-to-stop-worrying-and-love-redux-9b50e505e802
A new Redux user describes how she was able to overcome initial problems learning Redux.
Introduction to Redux and React-Redux
https://julienrenaux.fr/2016/05/30/introduction-to-redux-and-react-redux/
A quick overview of core Redux concepts, with code examples for creating a store and hooking up React components to read the data.
An Introduction to Redux
https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
An overview and intro to the basic concepts of Redux. Looks at the benefits of using Redux, how it differs from MVC or Flux, and its relation to functional programming.
Why Redux makes sense to me and how I conceptualize it
https://medium.com/@fay_jai/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca
Some useful analogies for visualizing how Redux works, how the pieces fit together, and why you'd want to use it.
How to Use the React-Redux package
https://code.tutsplus.com/tutorials/how-to-use-the-react-redux-package--cms-27150
An excerpt from the "Modern Web Apps with React and Redux" course, explaining how to use React-Redux to connect components to Redux.
React/Redux Tutorials
https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a
A set of video tutorials introducing Redux concepts
Redux for the Very Beginner
https://toranbillups.com/blog/archive/2016/01/22/redux-for-the-very-beginner/
A beginner-friendly screencast that introduces Redux
React, Redux, and React-Redux
https://jilles.me/react-redux-and-react-redux/
Comparison and examples of implementing a filterable list with just React, with "manual" React code reading from Redux, and using the official React-Redux library
Redux's Mysterious Connect Function
https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4
An overview of how to use React-Redux's connect function to glue together a Redux store and React components
Why You Should Use Redux to Manage Immutability
https://www.toptal.com/javascript/immutability-in-javascript-using-redux
An introduction to several aspects of Redux, including immutability concepts, use of immutable data libraries, using middleware for side effects, and connecting React to Redux
An Introduction to Redux / Redux: Would you like to know more?
https://c3-tko.github.io/introduction-to-redux/#/
https://c3-tko.github.io/redux-would-you-like-to-know-more/#/
A pair of HTML slideshows that discuss some of the problems of storing application state, how Redux can help solve those problems, and several tradeoffs and benefits of using Redux.
DevGuides: Introduction to Redux
https://devguides.io/redux/
A tutorial that covers several aspects of Redux, including actions, reducers, usage with React, and middleware.
React-Redux connect explained
https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/
A short but clear explanation of what the React-Redux library does, and how its connect function works to interact between React components and a Redux store (including several helpful diagrams).
Redux by Example
https://medium.com/front-end-hacking/redux-by-example-part-1-4afca1b7bd58
https://medium.com/front-end-hacking/redux-by-example-part-2-e9750574e3c1
https://medium.com/front-end-hacking/redux-by-example-part-3-52e82d82d861
https://medium.com/front-end-hacking/redux-by-example-part-4-474c76eec86d
A 4-part series that illustrates core Redux concepts via a series of small example repos, with explanations of the source and concepts in the articles.
React-Redux Cheatsheet
https://github.com/uanders/react-redux-cheatsheet
A diagram that tries to illustrate all the various pieces of the React+Redux API and workflow
Beginner's guide to React/Redux - How to start learning and not be overwhelmed
https://medium.com/netscape/beginners-guide-to-react-redux-how-to-start-learning-and-not-be-overwhelmed-af04353101e
A good writeup from a React/Redux beginner, with advice on how to get started learning React and Redux, how to approach building your first meaningful React+Redux application, and related topics such as file structure, data flow, and rendering logic.
Getting Started with Redux
https://www.sitepoint.com/getting-started-redux/
https://www.sitepoint.com/redux-not-art-structuring-state-react-apps/
A pair of very readable tutorials for getting started with Redux. The first introduces Redux's core concepts while building out a small shopping cart example, and the second describes how to transition from storing data using React's setState over to putting it in Redux instead, and gives examples of managing real-world form state with Redux.
When do I know I'm ready for Redux?
https://medium.com/dailyjs/when-do-i-know-im-ready-for-redux-f34da253c85f
Walks through a typical process of scaling up a React application, and how Redux can help solve common pain points with data flow. Has some really neat animated diagrams that illustrate how state updates interact with the React component tree.
4 ways to dispatch actions with Redux
https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux
Describes different ways to dispatch actions from React components: directly passing the store, using connect, using sagas, and using the bindActionCreators utility.
Introduction to Redux
https://www.kirupa.com/react/introduction_to_redux.htm
A basic introduction to the ideas of storing data in Redux and dispatching actions to update that data.
Using Redux with React
https://www.kirupa.com/react/introduction_to_redux.htm
An excellent follow-up to the previous article, with explanations of why Redux is helpful in a React app, and diagrams showing the data flow.
TLTR; Redux
https://medium.com/@nicotsou/tltr-redux-e4fc30f87e4a
A clear descriptive overview of Redux's background, core concepts, principles, and usage with React. Also describes the basics of async behavior, testing, and debugging.
Introduction to Redux / A beginner's introduction to working with Redux in React
https://dev.to/aurelkurtula/introduction-to-redux-1g3
https://dev.to/aurelkurtula/a-beginners-introduction-to-working-with-redux-in-react-13k
A pair of tutorials that explain the basics of working with a Redux store and how to use the React-Redux library.
Immutable Updates in React and Redux
https://daveceddia.com/immutable-updates-react-redux/
Good examples of how to properly update nested state immutably
The most common Redux mistake and how to avoid it
https://blog.jakoblind.no/most-common-redux-mistake/
Quick tips on understanding how to update data immutability, and avoid mutations.
Replacing state in Redux reducers: a few approaches
https://chariotsolutions.com/blog/post/replacing-state-in-redux-reducers-a-few-approaches/
Examples of different ways to safely update state in reducers.
React application state management with Redux
https://chariotsolutions.com/blog/post/react-application-state-management-with-redux/
A tutorial that discusses why a state management library is useful in React apps, introduces Redux usage, and shows how to subscribe to Redux store updates both by hand and using React-Redux.

Project-Based Tutorials

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.
Building a Simple CRUD App with React + Redux
https://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/
A nifty 8-part series that demonstrates building a CRUD app, including routing, AJAX calls, and the various CRUD aspects. Very well written, with some useful diagrams as well.
The Soundcloud Client in React + Redux
https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/
A detailed walkthrough demonstrating project setup, routing, authentication, fetching of remote data, and wrapping of a stateful library.
Full-Stack Redux Tutorial
https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
A full-blown, in-depth tutorial that builds up a complete client-server application.
Getting Started with React, Redux and Immutable: a Test-Driven Tutorial
https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/
https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/
Another solid, in-depth tutorial, similar to the "Full-Stack" tutorial. Builds a client-only TodoMVC app, and demonstrates a good project setup (including a Mocha+JSDOM-based testing configuration). Well-written, covers many concepts, and very easy to follow.
Managing Data Flow on the Client Side
https://blog.madewithlove.be/post/redux/
Walks through a small Redux example, and talks about the benefits
Build an Image Gallery using React, Redux, and redux-saga
https://joelhooks.com/blog/2016/03/20/build-an-image-gallery-using-redux-saga
A step-by-step look at building a page with some complex async behavior.
Interactive Frontend Development with React and Redux
https://courses.cs.ut.ee/2016/react/spring/Main/Lectures
An Estonian university course covering React and Redux. Lecture videos, slides, and course code are all available online (in English). Topics include React philosophy, container components, Redux basics, async actions, middleware, routing, and optimization.
TypeScript Redux
https://github.com/ServiceStackApps/typescript-redux
This guide goes through setting up, running and exploring the ultimate JavaScript Stack du jour: TypeScript, JSPM, React, and Redux.
Redux Hero: An Intro to Redux and Reselect
https://decembersoft.com/posts/redux-hero-part-1-a-hero-is-born-a-fun-introduction-to-redux-js/
https://decembersoft.com/posts/redux-hero-part-2-actions-and-their-consequences-a-fun-introduction-to-redux-actions/
https://decembersoft.com/posts/redux-hero-part-3-choose-wisely-a-fun-introduction-to-reselect-js/
https://decembersoft.com/posts/redux-hero-part-4-every-hero-needs-a-villain-a-fun-introduction-to-redux-saga-js/
An introduction to Redux and related libraries through building a small RPG-style game
Building a Chat App with React, Redux, and PubNub
https://www.pubnub.com/blog/2016-06-14-getting-started-with-pubnub-and-react/
https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/
https://www.pubnub.com/blog/2016-07-20-adding-realtime-user-list-to-react-chat-app/
https://www.pubnub.com/blog/2016-08-16-add-typing-indicator-to-your-react-based-chat-app/
A four-part tutorial that walks through building a realtime chat app
Mapping Colorado's 14er Mountains with React and Redux
https://appendto.com/2016/10/mapping-colorados-14er-mountains-with-react-and-redux-mega-tutorial/
Demonstrates building an app that uses Google Maps to show markers for locations, as well as cards with info on those locations.
Zero to Hero with React and Redux
https://codequs.com/p/B1oWbS_Nyx/zero-to-hero-with-react-and-redux/
A 2-hour video tutorial that introduces Redux concepts and use with TypeScript.
Screencast: Builting a React/Redux App from Scratch
https://medium.com/@kensodev/screencast-1-1-session-building-a-react-redux-application-from-scratch-f888c1e74c6
A 2-hour screencast demonstrating building a Redux app from the ground up
Build a Media Library With React, Redux, and Redux-Saga
https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1
https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2
A two-part tutorial that builds an image and video display and preview app
A Practical Guide to Redux
https://lorenstewart.me/2016/11/27/a-practical-guide-to-redux/
A tutorial that introduces the key concepts and usage of Redux through the code in a small sample app.
A comprehensive React-Redux tutorial
https://spapas.github.io/2016/03/02/react-redux-tutorial/
A very long, detailed article that digs into Redux's concepts, and builds a book management application in the process.
React and Redux Sagas Authentication App Tutorial
https://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/
https://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-2/
https://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-3/
A 3-part tutorial that builds a reasonably complex app, using Redux-Saga, Redux-Form and React-Router, with an emphasis on practical aspects of putting things together.
Get familiar with React, Redux, and basic personal finance
https://medium.com/@ryanjyost/react-redux-react-router-and-rainy-day-fund-tutorial-e589f0803306
A tutorial that builds a small financial savings calculation app.
Build a CRUD App Using React, Redux, and FeathersJS
https://www.sitepoint.com/crud-app-react-redux-feathersjs/
Walks through building a client-server application that uses FeathersJS to set up the server API.
Building Tesla's Battery Range Calculator with React+Redux
https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-2-redux-version-2ffe29018eec
Follows the "plain React" version in Part 1 by introducing basic Redux concepts, and modifying the original version to use Redux for managing state.
Simple Redux Create Delete Contact Application
https://appdividend.com/2017/11/02/simple-redux-create-delete-contact-application/
Demonstrates building a simple client-side contact list app
React + Redux: User Registration and Login Tutorial
https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
A tutorial that shows how to build a React+Redux app that uses JWT authentication, with the example based on a real-world application.
Build a Bookshop with React & Redux
https://scotch.io/tutorials/build-a-bookshop-with-react-redux-i-react-redux-flow
https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks
Introduces React and Redux concepts by building a small bookshop app.
How to build a Chat Application using React, Redux, Redux-Saga, and Web Sockets
https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a
A tutorial that demonstrates building a small real-time client-server chat application.
CRUD with Redux
https://www.youtube.com/playlist?list=PLuNEz8XtB51KfnHc99GwscPy1UbLJyXHW
A video screencast tutorial series that demonstrates how to build a CRUD app with React, Redux, React-Router, and MongoDB.
Developing Games with React, Redux, and SVG
https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/
https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/
https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/
A 3-part series that shows how to build a Space Invaders-style action game using React for the UI layer, SVG for the display, and Redux for the data flow, as well as socket.io for a real-time leaderboard and Auth0 for authentication.

Redux Implementation Walkthroughs

Read the Source ep17 - React Redux with Dan Abramov
https://youtu.be/VJ38wSFbM3A
Dan walks through the implementation and concepts of React-Redux. A great follow-up to the Egghead.io tutorial series.
Connect.js explained
https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
A very simplified version of React Redux's connect() function that illustrates the basic implementation
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 also connect and middleware as well.
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.
Learning Redux with Reducks
https://www.aaron-powell.com/tags/reducks/
Another "build a mini-Redux" article series.
AMA with the Redux Creators
https://hashnode.com/ama/with-redux-cisteui6p005gzx53fstg8t6l
Dan Abramov and Andrew Clark answer questions about Redux, and describe the history of its original development. Second link is a summary of answers in the AMA.
Rebuilding Redux
https://www.spencerdixon.com/blog/rebuilding-redux/
A short screencast that demonstrates building a mini-Redux from scratch
Build Alterdux: A Redux-Compatible Library From Scratch
https://antjanus.com/blog/web-development-tutorials/front-end-development/build-alterdux-redux-like-redux-compatible-library-scratch/
A useful example of building a mini-Redux from the ground up, with explanations of some of the ideas that Redux uses.
Code your own Redux
https://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux/
https://blog.jakoblind.no/2017/03/20/learn-react-redux-by-coding-the-connect-function-yourself/
Another "build a mini-Redux" series, including an explanation of how React-Redux's connect function works
Dissecting Redux
https://medium.com/@jankjr_/dissecting-redux-864039c6cf59
A dive through the source code of Redux looking at the parts that really matter, with discussion of the design decisions and patterns used and what consequences they have.
"Redux without the sanity checks in a single file"
https://gist.github.com/gaearon/ffd88b0e4f00b22c3159
A gist from Dan Abramov, showing how Redux's core logic fits into less than 100 LOC.
Reading Redux: createStore
https://engineering.universe.com/reading-redux-ca160163867e
A guided walkthrough of the code for Redux's createStore function
Implement React Redux from Scratch
https://medium.com/@kj_huang/implementation-of-react-redux-part-1-411b971a9b5b
https://medium.com/@kj_huang/implementation-of-react-redux-part-2-633441bd3306
https://medium.com/@kj_huang/implementation-of-react-redux-part-3-dc54fce9746a
A 3-part series that builds a slightly simplified version of the React-Redux v5 connect function to explain how it works. A good follow-up from Dan's "connect.js explained" gist, which shows the basic conceptual behavior of connect, while this one traces through the internals.
"I use React and Redux but never React-Redux, what am I missing out on?"
https://www.reddit.com/r/javascript/comments/6hperk/i_use_react_and_redux_but_never_reactredux_what/dj0fywb/
A response I wrote to someone who asked why they should use the React-Redux connect function instead of subscribing to the store manually, where I described the benefits of using connect instead of writing manual subscription code.
"Help getting @connect command to work with my Create-React-App project"
https://www.reddit.com/r/reactjs/comments/6l9roo/question_help_getting_connect_command_to_work/djskwqi/
A comment I wrote describing why the Redux team discourages use of connect as a decorator.
tiny-redux
https://github.com/jamischarles/tiny-redux
A small reimplementation of Redux, with comments explaining how the code works.
Finally understand Redux by building your own Store
https://toddmotto.com/redux-typescript-store
Teaches Redux concepts by going under the hood and building a Redux-equivalent Store class from scratch
redux-class
https://github.com/GKhalsa/redux-class
A miniature Redux and React-Redux implementation built for learning purposes

Paid Courses and Books

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.
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!)
Developing a Redux Edge
https://bleedingedgepress.com/developing-a-redux-edge/
This book is for anyone wanting to learn about Redux, a predictable state container for JavaScript apps. It is aimed at intermediate developers who have a good understanding of creating single page applications with JavaScript.
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 ES6. 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, 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.
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
Modern Web Apps with React and Redux (paid)
https://code.tutsplus.com/courses/modern-web-apps-with-react-and-redux
A paid course on TutsPlus that builds a spaced-repetition notecard app.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!