redux-tutorials.md

Redux Tutorials

Basic Introductions

• Redux Docs
  http://redux.js.org/index.html
  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"

• Getting Started with Redux - Video Series
  https://egghead.io/series/getting-started-with-redux
  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://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.

• 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

• Understanding Redux
  http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container
  A higher-level description of what Redux is, the major concepts, and why you would want to use it. Also some additional article links.

• A Cartoon Guide to Redux
  https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.3k23w6m18
  Another high-level description of Redux, with cartoons

• 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.

• Redux and React Redux
  http://www.pshrmn.com/tutorials/react/redux/
  http://www.pshrmn.com/tutorials/react/react-redux/
  A pair of articles covering basic Redux concepts and usage.

• An Introduction to Redux
  https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
  An overview and intro to the basic concepts of Redux.

• 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.

• Redux10: A Visual Overview of Redux in 10 Steps
  https://github.com/chrisscoular/Redux10
  A small repo with a standalone HTML page. Walks through 10 simple steps to help explain the basics of Redux.

• 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.

• Pro React beta chapter: Using Redux
  http://www.pro-react.com/materials/
  An alternative version of Pro React's chapter on using Flux that explains Redux usage

• 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.

Project-Based Tutorials

• Managing Data Flow on the Client Side
  http://blog.madewithlove.be/post/redux/
  Walks through a small Redux example, and talks about the benefits

• Getting Started with Redux
  http://www.jchapron.com/2015/08/14/getting-started-with-redux/
  Walks through setting up a small Redux app, and builds up each layer

• 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.

• 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.

• 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.

• 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.

• Build a React Redux App with JSON Web Token (JWT) Authentication
  http://blog.slatepeak.com/build-a-react-redux-app-with-json-web-token-jwt-authentication/
  Demonstrates building the client portion of a JWT-authenticated application (follow-up to previous articles that built the server-side).

• 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

• React and Redux Tutorial - Trending Github
  http://myappincome.co.uk/react-redux-tutorial-trending-github-part-1/
  A five-part tutorial that builds a small app showing trending Github repos.

• 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

• Practical Redux
  http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
  http://blog.isquaredsoftware.com/2016/11/practical-redux-part-3-project-planning-and-setup/
  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.

• 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.

• 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.

• 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.

• Nathan's Guide to Building a React/Redux Application
  https://www.nathanl.in/posts/nathans-guide-to-building-kick-ass-react-applications-part-i
  https://www.nathanl.in/posts/building-kickass-react-applications-with-nathan-part-ii-adding-redux
  A tutorial intended to bridge the gap between "hello world" tutorials and "real-world" boilerplates. Covers building a server-rendered React application using Webpack 2, React Router 4, Redux, and ES6.

• 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.

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.

• Hacking Redux
  http://paulserraino.com/javascript/2016/02/16/hacking-redux.html
  Looks at the core concepts in Redux, and builds up a mini-Redux to demonstrate how Redux works internally.

• Learning Redux with Reducks
  http://www.aaron-powell.com/tagged/reducks.html
  Another "build a mini-Redux" article series.

• AMA with the Redux Creators
  https://hashnode.com/ama/with-redux-cisteui6p005gzx53fstg8t6l
  https://blog.hashnode.com/the-story-of-redux-and-more/
  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 <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.

Paid Courses and Books

• 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 Web Apps with React and Redux
  http://code.tutsplus.com/courses/modern-web-apps-with-react-and-redux
  A paid course on TutsPlus that builds a spaced-repetition notecard app.