redux-tutorials.md

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
  http://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
  http://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
  http://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
  http://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
  http://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
  http://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
  http://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
  http://toranbillups.com/blog/archive/2016/01/22/redux-for-the-very-beginner/
  A beginner-friendly screencast that introduces Redux

• React, Redux, and React-Redux
  http://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
  http://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
  http://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
  http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
  http://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
  http://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
  http://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
  http://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
  http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/
  http://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
  http://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
  http://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
  http://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
  http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/
  http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-2/
  http://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
  http://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!
  http://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
  http://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux/
  http://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)
  http://code.tutsplus.com/courses/modern-web-apps-with-react-and-redux
  A paid course on TutsPlus that builds a spaced-repetition notecard app.