Bookmark/Star this GitHub repository so you don't forget where it is!
Having built many web applications over the past few years using all the most popular frameworks/libraries, we were delighted to discover Redux's refreshingly simple approach.
While there is an initial learning curve
we feel the simplicity
of the single
store (snapshot of your app's state)
and applying changes to your app
by dispatching succinct functional actions
offers a significant
benefit over other ways of organising your code.
Please, don't take our word for it, skim through the notes we have made and always decide for yourself.
Redux1 borrows the reducer pattern from
which simplifies writing web apps.
If you have never heard of Elm, don't worry, you don't need to go read another doc before you can understand this... Just keep reading and (hopefully) everything will become clear.
Redux is based on three principals.
1. Single Source of Truth
The state of your whole application is stored in a single object tree; the "Store".
This makes it much easier to keep track of the "State" of your application at any time and roll back to any previous state.
If its not intermediately obvious why this is a good thing, we urge you to have faith and keep reading...
2. State is Read-Only ("Immutable")
Instead of directly updating data in the store, we describe the update as a function which gets applied to the existing store and returns a new version.
3. Changes are made Using Pure Functions
To change the state tree we use "actions" called "reducers", these are simple functions which perform a single action.
understanding these two things will help you grasp why Redux is so simple.
You will see this abbreviated/codified as
(state, action) => state
to understand what this means, watch: youtu.be/xsSnOQynTHs?t=15m51s
Learn Where Redux Got It's Best Ideas From!
Redux "takes cues from"
(i.e. takes all it's best ideas/features from) Elm.
So... by learning The Elm Architecture, you will intrinsically understand Redux
which will help you learn/develop React apps.
We wrote a complete beginner's step-by-step introduction
If after you've learned Redux and built a couple of React Apps, you decide you want to discover where all the best ideas in the React ecosystem came from, checkout: github.com/dwyl/learn-elm
Learn from the Creator of Redux!
The fastest way to learn Redux is to watch the
Introductory Video Tutorials
recoded by Dan Abramov (the Creator of Redux).
The videos are broken down into "bite size" chunks which are easily digestible. Total viewing time for the videos is 66 minutes
We have made a set of comprehensive notes/transcriptions on the videos, these are in: egghead.io_video_tutorial_notes.md
We recommend keeping the notes open in a distinct window/browser while you are watching the videos; you can go a lot faster because all the sample code is included and if for any reason you do not understand what Dan is saying you have the notes to refer to.
Please give feedback and suggest improvements by creating issues on GitHub: https://github.com/dwyl/learn-redux/issues Thanks!
Background Reading / Watching / Listening
- GitHub Project: https://github.com/reactjs/redux/
- Online Documentation: http://redux.js.org/
- Interview with @gaearon (Dan Abramov - creator of Redux) on The Changelog Podcast: https://changelog.com/187 - Good history and insight into his motivations for learning to program and the journey that lead him to writing Redux.
- Smart and Dumb Components by Dan Abramov https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- Write Yourself A Redux by Justin Deal/Zapier Engineering - Goes over the entire architecture and lets you build your own Redux from scratch! (April 27, 2017)
- Ducks - a proposal for bundling reducers, action types and actions when using Redux - by Erik Rasmussen https://github.com/erikras/ducks-modular-redux
- Redux best practices by Will Becker https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e
- Starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform: https://github.com/erikras/react-redux-universal-hot-example
- Full-Stack Redux Tutorial (Redux, React & Immutable.js) by @teropa http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html - really good but takes 4h+!
- Single source of truth: https://en.wikipedia.org/wiki/Single_Source_of_Truth
- Redux Undo: https://github.com/omnidan/redux-undo
- Cartoon! On Redux: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.f9fhidgvl
- ...And flux: https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.jdauhkpjg
- ...And time travel debugging (this one's short)! https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35#.cvkq7d5du
If you are building a React-based app you will most likely be using react-router to manage the routing of your client-side app ... React-Router manages an important piece of your application state: the URL. If you are using redux, you want your app state to fully represent your UI; if you snapshotted the app state, you should be able to load it up later and see the same thing.
- Keep react-router and redux in sync: https://github.com/rackt/redux-simple-router
- A Simple Way to Route with Redux (November 25, 2015) by James Long @Mozilla http://jlongster.com/A-Simple-Way-to-Route-with-Redux
At the time of writing, the minified version of Redux is 5.4kb which is even smaller when GZipped!
Frequently Asked Questions (FAQ)
(Do I Need to use) React ?
Short Answer: No, Redux does not depend on or require you to use React; the two are separate and can be learned/used independently.
Longer Answer: While many Redux apps and tutorials use React, Redux is totally separate from React. Dan's EggHead Video Tutorials do feature React heavily from Lesson 8 onwards.
React is a good fit for rendering views in a Redux-based app, however there are many other great alternative component-based virtual-DOM-enabled view rendering libraries (#mouth-full) that work really well with Redux; e.g: https://github.com/dekujs/deku
Considering that React is the fastest growing "view" (DOM Rendering) library of 2015 and the pace of its' adoption looks set to continue in 2016 ... so it won't hurt you to know how to use React.
We've made some notes to help you get started learning React: https://github.com/dwyl/learn-react
You can/should use Redux to organise your application and optionally use React
render your views.
(Should I use) Immutable.js ?
Short Answer: Not Yet!
The convention in Redux apps is for the
state to be
this makes your app far more predictable because
any/all changes to the
state have to be done via an
makes the data structures in your application
more efficient (in larger apps) however,
while you are learning Redux we suggest you ignore immutable.js
as you will have more than enough to master for now.
Once you have published your first app using Redux,
come back to immutable.js to appreciate how it makes large apps
run faster. As Lee Byron, the creator of Immutable.js states,
for small apps without much change in
state, adding Immutable.js
will actually make your app perform worse!
If you want to understand why using Immutable.js can be a good thing in large apps, watch Lee Byron's intro to Immutable
- Explain why Unidirectional Data Flow is this "better" than bi-directional e.g: Angular.js
Kudos to Fellow DWYLers
Props to Rafe for telling us about Redux and Elm: https://github.com/rjmk/reducks before it was cool
Thanks to Milo for his fantastic demo/example: https://github.com/bananaoomarang/isomorphic-redux
(which he has painstakingly kept up-to-date with the latest Redux/React versions!)
and love to Niki & Jack for their enthusiasm and patience while explaining it all to us ...
Thanks for Learning with Us!
If you found our notes useful, please share them with others by starring this repo and/or re-tweeting: