Redux

Redux is a JavaScript library for managing the state of your application.

Big applications have big application states and managing them gets more and more inconvenient as your app grows. This is where state management libraries like Redux come in.

Redux follows a pattern called “Single Source Of Truth”, which means that we have only one place (called Store) where we store the only state for the whole application.

To create a react-redux project:

This component was made by Stratis Dermanoutsos. The code can be found here.

Redux has 3 main parts:

Actions

Actions are JavaScript objects that describe WHAT happened, but not HOW the app state changes.

We just send (dispatch) them to τhe store instance whenever we want to update the state of our application. The rest is handled by the reducers.

Redux requires our action objects to contain a type field. This field is used to describe what kind of action we are dispatching and it should usually be a constant that you export from a file. More fields can be added in the action object and are completely up to the developer.

Example action:

This component was made by Stratis Dermanoutsos. The code can be found here.

This action in activated when the user clicks the “Add Note” button and informs the store that we want to add a new Note.

Action Creators

They are functions that generate and return plain JavaScript objects.

The above action can be written as

This component was made by Stratis Dermanoutsos. The code can be found here.

Reducers

Reducers are functions that define HOW the app state changes. In other words, they recalculate the new application state.

Whenever an action is dispatched to the store, the action gets passed to the reducer.

The reducer function takes two parameters:

  • the previous app state
  • the action being dispatched

It returns the new app state.

This component was made by Stratis Dermanoutsos. The code can be found here.

To deal with reducer complexity, we chunk them down in multiple, simpler reducers and later, we combine them with a Redux helper function called combineReducers.

The main reducer is conventionally called “Root Reducer”.

Store

The store hold the state of the application.

It is actually an object, NOT a class.

It is possible to create multiple stores, this is against the pattern that Redux follows. We create only one store per application!

The values to be stored in it are completely up to the developer and they can be nested as much as needed.

Store Provider

It is VERY important to give a provider to the App so it knows where the state is being stored.

This is quite simple and can be achieved by encapsulating the <App /> component instance inside the Provider like so:

  • Go to index.(js|tsx)

  • Include the store and the Provider

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Change

    <App />

    to

    This component was made by Stratis Dermanoutsos. The code can be found here.

Setup example

A convenient Redux file tree setup is

redux/
|- actions/
|  |- actions.js
|- reducers/
|  |- reducers.js
|- store/
|  |- store.js

or, my personal choice,

src/
|- app/
|  |- store.js
|- slices/
|  |- ...
|- components/
|  ...

Simple todo project template

The template we’ll use is the following (JavaScript)

src/
|- app/
|  |- store.js
|- slices/
|  |- todosSlice.js
|- components/
|  |- Todos.jsx
|- App.js
|  ...

src/

app/

store.js
This component was made by Stratis Dermanoutsos. The code can be found here.

slices/

todosSlice.js
This component was made by Stratis Dermanoutsos. The code can be found here.

components/

Todos.jsx
This component was made by Stratis Dermanoutsos. The code can be found here.

App.js

This component was made by Stratis Dermanoutsos. The code can be found here.

Resources