Redux Knowledge

Contents

• Overview
• Core Idea
• Key Concepts
  • Stores
  • Actions
  • dispatch()
  • Reducers
  • (Pseudo) Immutability
• Redux Terminology

Overview

Redux is a JavaScript library for application state management. It brings together concepts from functional programming (reduce, immutable data) and message passing (actions, dispatch) to provide a framework that is predictable in operation but still extensible.

Core Idea

Redux is, in essence, the following pseudo-code:

newState = actions.reduce((state, action) => { /* reducer code */ }, oldState)

In this case actions are dynamically populated via calls to dispatch() and (state, action) => {} represents the reducer code that takes the old state and the current action to return a new state.

So why do this?

• Clarity. Using a concept from functional programming imparts a message (however hard to enforce) about thinking about your data as an immutable structure. This makes reasoning about your applications state and debugging easier.
• Convenience. A globally available dispatch() allows for any part of the app to start integrating modifications to application state without having to figure out data flow hierarchies and paths.
• Order. Logic exists in one place and may be called from multiple places; previous logic both existed and was called from multiple places.

Key Concepts

Stores

A store contains the application state, represented as a plain JavaScript object.

Actions

Actions are messages passed via dispatch() that affect application state. They may contain a payload of data and each will be presented sequentially to a reducer for processing.

Actions should decouple “what happened” from “how the state changes”.

dispatch()

Importable function that take an action and queues it for processing by reducers.

Reducers

Reducers are functions that take the current state and an action, returning a new, possibly changed, state. The changes performed are based on the logic of your application with respect to the action dispatched.

Reducers must:

• operate without side effects, i.e. only calculating new state based on state and actions and not firing off additional async / external logic
• be deterministic (check: can your reducer can be fired multiple times with the same arguments and always return the same result?)
• not modify the input state; only return a new object containing changes and copied values

(Pseudo) Immutability

Redux requires that a new state object is returned from reducers. Redux Toolkit addresses this issue by using Immer under the hood. Mutation is not permitted because, in addition to going against the core framework value of predictability, it would make it very difficult for Redux to determine what changes to state actually occurred. These change notifications are what drive integrations like those with React to then trigger UI updates.

Redux Terminology

action

a message containing a “payload”

dispatch

function for passing actions to be processed by reducers

payload

the JavaScript object passed via an “action” which will be processed by the reducers

reducer

the function that accepts previous state and an action, returning a new state that, if needed, updates the store

slice

(Redux Toolkit) a convenience wrapper bundling a store, reducers, and actions; represents the entire stack of a specific segment of application state

slice

refers to a literal “slice” of data; can be thought of a way of segmenting state into multiple distinct pieces

store

an object containing a “plain JavaScript” object representing the state of the application