Redux

Redux keeps your application’s entire state in one place called a “store”. This avoids passing props through child components because each Component just communicates with the “store”.

Redux — Motivaton

  • Mutation and asychronicity create complexity that’s hard to understand.
  • React was created to solve this in the UI by removing asynchrony and DOM manipulation.
  • State is still your problem.
  • Redux was created to make state mutations predictable by imposing rules on how/when updates can happen.

Redux — Core Concepts

  • State is an object.
  • Actions are objects that you dispatch to describe state changes.
  • Reducers are functions that accept state and actions as arguments, and return the next state.

Redux — Three Principles

  1. Single source of truth.
    The state of your whole application is stored in an object within a single “store”.
  2. State is read-only.
    The only way to change the state is to emit an action, an object describing what happened.
  3. Changes are made with pure functions.
    To specify how the state tree is transformed by actions, you write pure reducers.

Redux — Learning Resources
Lots of links to resources.

CSS Tricks — Learning React Redux

  • Example: Redux store and one reducer.
  • Example: Redux store and multiple reducers.
  • How Redux makes undo/redo features easy through rehydration of a serialized state.
  • Example: react-redux in a React Component.

Courses

Dan Abramov — Getting started with Redux
Free for 30 videos (2 hours). From the creator of Redux.