:boom: Comprehensive Notes for Learning (how to use) Redux to manage state in your Web/Mobile (React.js) Apps.
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.
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...
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.
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
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
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**videotutorial_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!
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.
At the time of writing, the minified version of Redux is 5.4kb which is even smaller when GZipped!
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 to
Short Answer: Not Yet!
Longer Answer: The convention in Redux apps is for the
immutablethis makes your app far more predictable because any/all changes to the
statehave to be done via an
Immutable.js makes the data structures in your application
statemore 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
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 ...
If you found our notes useful, please share them with others by starring this repo and/or re-tweeting: