Redux, MVC, NGRX, ... What is it ??

Components is cool !

But what is component ?

Custom HTML Element

View

Properties

Internal State

<LikeBtn nbLike="36" />
// isLiked = false

<LikeBtn nbLike="37" />
// isLiked = True

Component in React

C

C

C

C

C

C

C

C

C

State

State

State

State

State

State

State

State

State

State management is hard

MVC

To the rescue

The original one

Applied to Angular

Redux

First principle of redux

Single source of truth

 

The state of your whole application is stored in an object tree within a single store.

Single source of truth

C

C

C

C

C

C

C

C

C

State

State

State

State

State

State

State

State

State

Single source of truth

C

C

C

C

C

C

C

C

C

State

Store

Second principle of redux

State is read-only

 

You have to dispatch action to change the state

State is read only

State

Store

Components

Action

Third principle of redux

Changes are made with pure function

 

Reducer must not modify their arguments

Changes are made with pure function

State

Store

Components

Action

Reducer

new State

Focus on a particular component

State

Store

Container (HOC)

Action

Reducer

new State

View

(stateless Component)

Props

React with redux

React with redux

React with redux

React with redux

What is Redux ? (and all redux-like)

By Florent Berthelot

What is Redux ? (and all redux-like)

What is the goal of redux in a component environnement ? I will compare Redux with MVC pattern before going deeper and compare Redux with common implementation in Current Frameworks.

  • 41
Loading comments...

More from Florent Berthelot