Redux , React Redux
and Redux Thunk
Nabil Md Shahid
Senior Software Engineer at Cefalo
Why Redux?
What problem does it solves?
The Problem: Props Drilling
The Solution: Central Store
Context Api vs Redux
Context Api Redux
Built into React External Library
Typically used for smaller, localized state needs Suitable for managing larger, global application
state
No centralized store; uses provider-consumer Centralized store (single source of truth)
model
Simpler API with less boilerplate Requires more setup and boilerplate code
No middleware support Extensive tooling with Redux DevTools,
middleware, etc
Can handle async actions with additional setup Supports async actions out-of-the-box with
middleware
Redux
A JS library for predictable and maintainable global state management.
Core principles:
● Single Source of Truth
● State is Immutable
● Changes are Made by Reducers
● Unidirectional Data Flow
#1 Single Source of Truth
● Single data structure (Store)
● This makes it easy to understand and reason about where the state lives
and how it changes over time
#2 State is Immutable
● It cannot be changed directly
● Every state change is performed by dispatching an action
#3 Changes are Made by Reducers
● State mutations are carried out by reducers
● Reducers are pure functions
● Takes current state and an action as input
● Produce a new state as output without modifying the original state
#4 Unidirectional Data Flow
React Redux
● Redux and React redux are two different libraries
● Redux provides the functionality
● React redux provides wrapper to work with redux easily
Redux Dataflow
Reducer
Action
State
View
Redux Dataflow
Reducer
Action
State
View
Event
Redux Dataflow
Action
Reducer
Action
State
View
Redux Dataflow
Action
Reducer
Action State
State
View
Redux Dataflow
Reducer
Action
State
View
Updated State
Code Example: Store setup
Reducer
Action
State
View
Code Example: Integrate with React
Redux Middlewares
● Redux middleware is a powerful feature that allows you to extend the capabilities of
Redux
● Intercepting actions before they reach the reducers
Middleware
Reducer
Action
State
View
Redux Thunk
● Redux thunk is a middleware to handle async logic
● A thunk is actually a function that is dispatched from a component
Redux Thunk Dataflow
API
Action / Thunk Middleware
Action
Reducer
Action
State
View
Redux Thunk: Implementation
Thank You
Questions? Comments?
