Introduction – Redux

• FAQ:
  • What is a Pure function?
  • What is an Action?
  • What is a Reducer?
  • What is a blind?
  • what is middleware
• Redux best practices
  • Structure the report correctly (avoid duplication of data)
    • DRY: reuse reducers as much as possible to avoid duplication
    • use of Middleware for side effects: (access to the network, access to the database.
    • normalization of the state: if there are done2es nested or linked together,
    • pure reducer: pure function - produces the same results if the same input is retested
    • separate the UI state from the data state: UI (information necessary to display it), data: (real user information)
    • use redux devtools for debugging

What is Redux?

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

Redux helps with consistent behavior, runs in different environments (client, server or even native)

Huge help for testing and debugging.

Principles

Overall state

in a tree object inside 1 Store

Status Read only

You only change a state by issuing an Action (object describing what happened)

Modification by Pure function

To specify how application state is changed based on actions, you write pure reducers.

Overall state

in a tree object inside 1 Store

Status Read only

You only change a state by issuing an Action (object describing what happened)

Modification by Pure function

To specify how application state is changed based on actions, you write pure reducers.

Basic concept

Action

Information packet that SENDS data from app → Store

Single source of information for the store

Reducers

Action describes whether something is happening, but does not specify how the state changes in response, that is the role of the reducer.

Store

object that brings together actions and reducers.

Responsibility: general state of the app, allows access to the state via getState

it allows status updating with dispatch(action)

it registers the listeners via subscribe(listener)

cleaning the earphone via return

Middleware

extension point between Dispatching an action —— the moment it reaches the reducer.

Keep state locally (localstorage)

the local storage of the browser.

Local storage is a browser feature that allows you to store data in the browser even after closing the page.

Here's how you can use local storage to persist your application data:

• In your React component, you can use the hook useEffect to save the data to local storage every time the data is updated:

import { useEffect } from 'react';
import { useSelector } from 'react-redux';
const MyComponent = () => {
const data = useSelector((state) => state.data);
useEffect(() => {
localStorage.setItem('myData', JSON.stringify(data));
}, [data]);
// ...
};

In this example, we use the hook useSelector to select the data we want to store in local storage. We then use the hook useEffect to save the data to local storage every time the data is updated. We use the local storage method setItem to save the data under the key 'myData'.

When your application is loaded, you can retrieve the data from local storage and use it to initialize the state of your application:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {

data: JSON.parse(localStorage.getItem('myData')) || [],

};

const mySlice = createSlice({

name: 'mySlice',

initialState,

reducers: {

// ...

},

});

export const { actions, reducer } = mySlice;

We use the local storage method getItem to retrieve the data stored under the key 'myData'. We then use the JSON.parse function to convert the data into a JavaScript object. If no data is stored under the key 'myData', we use an empty array as the default.

We then use the initialState object to initialize the state of our Redux slice. The initial state contains the data retrieved from local storage.

Using this method, your app data will be stored in the browser's local storage and will be retrieved every time the app is loaded.