Rangle.io: React Training
gitbook
gitbook
  • Introduction
  • Setup
  • Functional JavaScript
  • ES6 constructs
    • Default Params
    • Template Literals
    • Destructuring
    • Arrow Functions
    • Promises
    • let and const
    • Modules
  • Thinking in Components
    • Atomic Design
    • Atomic Component Principles
    • Benefits of This Approach
    • The Process
    • Task #1
  • React Components
    • Stateless Components
    • Stateful Components
    • Stateful vs Stateless Components
    • Composition
    • Task #2
    • Task #3
    • Task #4
    • Task #5
  • Immutable
    • What Is Immutability?
    • The Case for Immutability
    • JavaScript Solutions
      • Object.assign
      • Object.freeze
    • Immutable.js Basics
      • Immutable.Map
        • Map.merge
      • Nested Objects
        • Deleting Keys
        • Maps are Iterable
      • Immutable.List
      • Performance
      • Persistent and Transient Data Structures
      • Official Documentation
    • Exercises
      • Task #1
      • Task #2
      • Task #3
      • Task #4
      • Task #5
      • Task #6
      • Task #7
  • Redux
    • Review of Reducers and Pure Functions
    • Redux Reducers
    • Redux Actions
    • Configuring your Application to use Redux
    • Using Redux with Components
    • Redux and Component Architecture
  • Routing
    • React Router
    • Router Redux
  • Forms
    • Redux Form
  • Testing
    • Setup
    • Components
    • Reducers
    • Actions
Powered by GitBook
On this page
  • Three Principles of Redux
  • 1. Single Source of Truth
  • 2. State Is Read Only
  • 3. Changes Are Made With Pure Functions
  • Resources

Was this helpful?

Redux

PreviousTask #7NextReview of Reducers and Pure Functions

Last updated 6 years ago

Was this helpful?

Redux is an application state manager for JavaScript applications, and keeps with the core principals of flux-architecture by having a unidirectional data flow in your application.

How it differs from traditional Flux though, is that instead of multiple stores, you have one global application state. The state is calculated and returned in the reducer. The state management is held else where.

Three Principles of Redux

1. Single Source of Truth

  • Entire state is stored in an object tree

    • Easy to debug

    • Easy to inspect application

    • Easy to hydrate initial state

2. State Is Read Only

  • Only way to mutate state is to emit an action

    • Actions describe what happened

    • Views, network callbacks, etc. will never mutate state

    • Mutations are centralized and happen in strict order

    • No race conditions

    • Actions are objects, they can be logged, serialized, stored, and replayed

3. Changes Are Made With Pure Functions

  • Reducers are responsible for modifying the state tree

    • Pure functions

    • Take in previous state, action, and return new state

    • Can be split out into smaller reducers to manage specific parts of state tree

Resources

  • Redux Documentation

  • React-Redux - React Bindings for Redux

  • React Redux Starter Kit

  • Getting Started with Redux - Egghead.io

  • Idiomatic Redux - Egghead.io