{"id":20929214,"url":"https://github.com/dwyl/learn-redux","last_synced_at":"2025-04-05T16:08:29.880Z","repository":{"id":46008238,"uuid":"48518818","full_name":"dwyl/learn-redux","owner":"dwyl","description":":boom: Comprehensive Notes for Learning (how to use) Redux to manage state in your Web/Mobile (React.js) Apps.","archived":false,"fork":false,"pushed_at":"2021-11-20T22:19:26.000Z","size":264,"stargazers_count":445,"open_issues_count":5,"forks_count":42,"subscribers_count":111,"default_branch":"master","last_synced_at":"2024-04-14T02:30:49.379Z","etag":null,"topics":["elm-architecture","howto","javascript","react","redux","tutorial"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwyl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-24T01:36:40.000Z","updated_at":"2024-02-08T19:50:49.000Z","dependencies_parsed_at":"2022-07-20T18:32:24.930Z","dependency_job_id":null,"html_url":"https://github.com/dwyl/learn-redux","commit_stats":null,"previous_names":["nelsonic/learn-redux"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwyl%2Flearn-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwyl","download_url":"https://codeload.github.com/dwyl/learn-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361691,"owners_count":20926643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm-architecture","howto","javascript","react","redux","tutorial"],"created_at":"2024-11-18T21:18:01.135Z","updated_at":"2025-04-05T16:08:29.860Z","avatar_url":"https://github.com/dwyl.png","language":"HTML","readme":"![learn-redux-header](https://cloud.githubusercontent.com/assets/194400/12328626/12f025de-bad4-11e5-9ebd-c0994b8f2f24.png)\n\n# Learn Redux\n\nRedux simplifies writing **well-structured**, ***predictable***, ***testable*** \u0026 ***maintainable*** JavaScript Web Applications.\n\n\u003e **Note**: this guide is aimed at people who already have \"***intermediate***\" ***JavaScript experience***.\n\u003e e.g. you have already built a couple of small apps without\n\u003e using a framework and/or have used an older more complex library such as Angular, Ember, Backbone or Flux.\n\u003e If you are just *starting* out on your web programming journey,\n\u003e we *recommend* you checkout:\n\u003e [https://github.com/dwyl/start-here#**javascript**](https://github.com/dwyl/start-here#javascript)\n\u003e ***first***\nand *then* come *back* here!  \n\u003e Bookmark/Star this GitHub repository so you don't forget where it is!\n\n\n## Why?\n\n![xkcd code quality](https://imgs.xkcd.com/comics/code_quality.png)\n\nJavaScript web applications can become messy if\nthey don't have a *clear* organisation from the beginning.\n\n**Redux** is an ***elegant*** way\nto ***structure*** your **JavaScript web applications**.  \n\nHaving built *many* web applications over the past few years\nusing *all* the most popular frameworks/libraries, we were *delighted*\nto discover Redux's *refreshingly simple approach*.\n\nWhile there is an ***initial learning curve***\nwe feel the *simplicity*\nof the *single* `store` (*snapshot of your app's state*)\nand applying changes to your app\nby *dispatching* succinct *functional* ***actions***\noffers a ***significant***\n**benefit** over other ways of organising your code.\n\n\u003e *Please, don't take our word for it,\nskim through the notes we have made and*\n***always decide for yourself***.\n\n## What?\n\nRedux[\u003csup\u003e1\u003c/sup\u003e](https://github.com/dwyl/learn-redux/issues/22) *borrows the* ***reducer pattern*** *from*\n[***Elm*** Architecture](https://github.com/evancz/elm-architecture-tutorial/)\nwhich simplifies writing web apps.  \nIf you have *never heard of Elm*, ***don't worry***,\nyou *don't need* to go read another doc before you can understand this...\nJust keep reading and (*hopefully*) everything will become clear.\n\n\u003e _If **anything** is **unclear**,\n**please tell us** where you are stuck **so we can help**_!\n[![Join the chat at https://gitter.im/dwyl/chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/dwyl/chat?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\n\n### Three Principals\n\nRedux is based on three principals.  \nsee: https://redux.js.org/understanding/thinking-in-redux/three-principles\n\n#### 1. *Single* Source of Truth\n\nThe state of your whole application is stored in a single object tree; the \"Store\".  \nThis makes it *much* easier to keep track of the \"*State*\" of your application\nat any time and roll back to any previous state.\n\n\u003e If its not *intermediately* obvious why this is a good thing,\nwe *urge* you to have faith and keep reading...\n\n#### 2. State is *Read-Only* (\"*Immutable*\")\n\nInstead of directly updating data in the store, we describe the update\nas a function which gets applied to the existing store and returns a new version.\n\n\u003e See: https://en.wikipedia.org/wiki/Immutable_object\n\n#### 3. Changes are made Using *Pure Functions*\n\nTo change the state tree we use \"*actions*\" called \"*reducers*\",\nthese are simple functions which perform a *single* action.\n\n\n\u003cbr /\u003e\n\n#### tl;dr\n\nRead more about JavaScript's Reduce (Array method):\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce  \nand how to reduce an array of Objects:\nhttps://stackoverflow.com/questions/5732043/javascript-reduce-on-array-of-objects  \nunderstanding these two things will help you grasp why Redux is so simple.\n\nYou will see this abbreviated/codified as `(state, action) =\u003e state`  \nto understand what this means, watch: [youtu.be/xsSnOQynTHs?t=15m51s](https://youtu.be/xsSnOQynTHs?t=15m51s)\n\n\n## How?\n\n### Learn Where Redux Got It's _Best_ Ideas From!\n\n[Redux](https://github.com/dwyl/learn-redux) \"_takes cues from_\"\n(_i.e. takes **all** it's **best ideas/features** from_) Elm.\n![redux-borrows-elm](https://cloud.githubusercontent.com/assets/194400/25845941/c7a9ce78-34a7-11e7-91fb-a65f99ce0046.png) \u003cbr /\u003e\nSo... by learning **The Elm _Architecture_**,\nyou will **_intrinsically_ understand Redux** \u003cbr /\u003e\nwhich will help you learn/develop React apps. \u003cbr /\u003e\n\nWe wrote a ***complete beginner's step-by-step introduction***\nto **The Elm _Architecture_** for **JavaScript** developers: \u003cbr /\u003e\n[github.com/dwyl/**learn-elm-architecture**-in-**javascript**](https://github.com/dwyl/learn-elm-architecture-in-javascript)\n\nIf _after_ you've learned Redux and built a couple of React Apps,\nyou decide you want to discover where all the _best_ ideas\nin the React _ecosystem_ came from,\ncheckout: [github.com/dwyl/**learn-elm**](https://github.com/dwyl/learn-elm)\n\n\n\n### Learn from the _Creator_ of Redux!\n\nThe *fastest* way to learn Redux is to watch the\n[Introductory Video Tutorials](https://egghead.io/series/getting-started-with-redux)\nrecoded by **Dan Abramov** (*the Creator of Redux*). \u003cbr /\u003e\nThe videos are broken down into \"bite size\" chunks which are easily digestible.\nTotal viewing time for the videos is [**66 minutes**]()\n\nWe have made a set of ***comprehensive notes/transcriptions*** on the videos, these are in:\n[egghead.io_**video_tutorial**_***notes***.md](https://github.com/dwyl/learn-redux/blob/master/egghead.io_video_tutorial_notes.md)  \n\nWe _recommend_ keeping the **notes** open in a distinct window/browser\nwhile you are watching the videos; you can go a *lot* faster because all the sample code is included\nand if for any reason you do not _understand_ what Dan is saying you have the notes to refer to.\n\n![learn-redux-video-notes-side-by-side](https://user-images.githubusercontent.com/194400/30913122-fa9cc800-a386-11e7-9801-228bcc5e6512.png)\n\n\u003e *Please* give feedback and suggest improvements by creating issues on GitHub:\nhttps://github.com/dwyl/learn-redux/issues\n*Thanks*!\n\n\n\u003cbr /\u003e\n\n## Background Reading / Watching / Listening\n\n+ GitHub Project: https://github.com/reduxjs/redux\n+ Online Documentation: https://redux.js.org/  \n+ ***Interview*** with [@gaearon](https://github.com/gaearon) (*Dan Abramov - creator of Redux*)\non The **Changelog** Podcast: https://changelog.com/187 -\nGood history and insight into his motivations for learning to program\nand the journey that lead him to writing Redux.\n+ Smart and Dumb Components by [Dan Abramov](https://github.com/gaearon)\nhttps://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\n+ Redux: Simplifying Application State in JavaScript -\nhttps://youtu.be/okdC5gcD-dM (*good overview by* [**Tim Griesser**](https://github.com/tgriesser) December 2015)\n+ [Write Yourself A Redux](https://zapier.com/engineering/how-to-build-redux/) by Justin Deal/Zapier Engineering - Goes over the entire architecture and lets you build your own Redux _from scratch_! (April 27, 2017)\n+ ***Ducks*** - a proposal for bundling reducers, action types and actions when using Redux - by [Erik Rasmussen](https://github.com/erikras)\nhttps://github.com/erikras/ducks-modular-redux\n+ Redux ***best practices*** by [Will Becker](https://github.com/wbecker) https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e\n+ Starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform: https://github.com/erikras/react-redux-universal-hot-example\n+ Full-Stack Redux Tutorial (Redux, React \u0026 Immutable.js) by\n[@teropa](https://github.com/teropa)\nhttps://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html - really good but takes 4h+!\n+ Single source of truth: https://en.wikipedia.org/wiki/Single_Source_of_Truth\n+ Redux Undo: https://github.com/omnidan/redux-undo\n+ **Cartoon!** On Redux: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.f9fhidgvl\n+ ...And flux: https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.jdauhkpjg\n+ ...And time travel debugging (this one's short)! https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35#.cvkq7d5du\n\n### Architecture\n\nIf you are building a React-based app\nyou will most likely be using [react-router](https://github.com/rackt/react-router)\nto manage the routing of your client-side app ...\nReact-Router manages an important piece of your application state:\nthe URL. If you are using redux, you want your app state to fully\nrepresent your UI; if you snapshotted the app state,\nyou should be able to load it up later and see the same thing.\n\n+ Keep react-router and redux in sync: https://github.com/rackt/redux-simple-router\n+ A Simple Way to Route with Redux (November 25, 2015) by [James Long @Mozilla](https://github.com/jlongster)\nhttps://jlongster.com/A-Simple-Way-to-Route-with-Redux\n\n### Size (*Matters*)\n\nAt the time of writing, the *minified* version of Redux is\n[**5.4kb**](https://github.com/dwyl/learn-redux/issues/11#issue-124671091)\nwhich is even *smaller* when GZipped!  \n\n\n## Frequently Asked Questions (*FAQ*)\n\n### (Do I *Need* to use) React ?\n\n**Short Answer**: ***No***, Redux does not depend on or require you to use React; the two are separate and can be learned/used independently.\n\n**Longer Answer**:\nWhile *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*.\n\nReact 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/anthonyshort/deku\n\nConsidering that React is *the* fastest growing \"*view*\" (*DOM Rendering*) library of 2015\nand the pace of its' adoption looks set to *continue* in 2016\n... so it won't *hurt* you to know *how* to use React.\n\nWe've made some notes to help you get started learning React:\nhttps://github.com/dwyl/learn-react\n\nYou can/should use Redux to *organise* your application and ***optionally*** use React\nto `render` your views.\n\n### (*Should I use*) Immutable.js ?\n\n**Short Answer**: ***Not Yet!***\n\n**Longer Answer**:\nThe *convention* in Redux apps is for the `state` to be\n[`immutable`](https://stackoverflow.com/questions/3200211/what-does-immutable-mean)\nthis makes your app far more predictable because\nany/all changes to the `state` have to be done via an `action`.\n\n[Immutable.js](https://facebook.github.io/immutable-js/)\nmakes the data structures in your application `state`\nmore efficient (*in larger apps*) however,\nwhile you are learning Redux we suggest you ignore **immutable.js**\nas you will have more than enough to master for now.\n\nOnce you have published your first app using Redux,\ncome back to immutable.js to appreciate how it makes ***large apps***\nrun faster. As Lee Byron, the *creator* of Immutable.js states,\nfor small apps without much change in `state`, adding Immutable.js\nwill actually make your app perform *worse*!\n\nIf you want to understand *why* using Immutable.js\ncan be a ***good*** thing in ***large apps***, watch\n[Lee Byron's intro to Immutable](https://www.youtube.com/watch?v=kbnUIhsX2ds)\n\n\n## Todo: [![pull requests welcomed!](https://img.shields.io/badge/pull%20requests-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/learn-redux/issues)\n\n+ [ ] Explain why ***Unidirectional Data Flow*** is this \"better\" than bi-directional e.g: Angular.js\n\n## Kudos to Fellow *DWYLers*\n\n\u003e Props to [***Rafe***](https://github.com/rjmk) for telling us about Redux and Elm: https://github.com/rjmk/reducks *before* it was *cool*  \n\u003e Thanks to [***Milo***](https://github.com/bananaoomarang) for his\n*fantastic* demo/example: https://github.com/bananaoomarang/isomorphic-redux  \n(*which he has painstakingly kept up-to-date with the latest Redux/React versions!*)  \n\u003e and *love* to [***Niki***](https://github.com/nikhilaravi) \u0026\n\u003e [***Jack***](https://github.com/jrans) for their\n\u003e *enthusiasm* and *patience* while explaining it all to us ...\n\n## *Thanks* for Learning with Us!\n\nIf you found our notes useful, please share them with others by\nstarring this repo and/or re-tweeting:\n\n[![dan_abramov_retweeted](https://cloud.githubusercontent.com/assets/194400/12523324/0ee0ac2c-c14e-11e5-9e6c-de4717fa474c.png)](https://twitter.com/dwylhq/status/687703493264732160)\n\n\u003e https://twitter.com/dwylhq/status/687703493264732160\n","funding_links":[],"categories":["Marks"],"sub_categories":["Resources"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwyl%2Flearn-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwyl%2Flearn-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwyl%2Flearn-redux/lists"}