Overview

REDUX

Redux is a pattern and a JS library that is used to manage (States) in an application project using events called (Actions). it is like a store for states that can be used through out the entire project once its called with some rules for updating these states.

Redux helps you manage "global" state - state that is needed across many parts of your application.

Redux is more useful when:

You have large amounts of application state that are needed in many places in the app
The app state is updated frequently over time
The logic to update that state may be complex
The app has a medium or large-sized codebase, and might be worked on by many people

Redux can integrate with any UI framework, and is most frequently used with React.

Store

The center of every Redux application is the store. A "store" is a container that holds your application's global state.

the store is going to combine all reducers in one place. I can access reducers from the store and this is the principle of single source.

Action

An Action is a function that always returns an object with the following properties:

type of action
payload --> the params of whatever I need to update the state.

Reducer

The part responsible for almost everything. it reduces all actions to only one. it comes from the concept of (reduce) method in JS, it reduces the array to only one value -> the sum.

We return new state with the new value whenever we want to update the state.

Provide the state stage

There are Three priciples of redux:
Single source of truth principle --> have to come from one place, store!
Reducers have to be pure functions.
State is read only. --> you can only update the state by dispatching an action (calling the function).

pure functions: doesn't have side effect, always gives the same output for the same input.

Consume the state

read the value of the state --> using a hook called (useSelector)
update the state --> hook (useDispatch)

How it works?

You must never directly modify or change the state that is kept inside the Redux store.
Instead, the only way to cause an update to the state is to create a plain action object, and then dispatch the action to the store to tell it what happened.
When an action is dispatched, the store runs the root reducer function, and lets it calculate the new state based on the old state and the action.
Finally, the store notifies subscribers that the state has been updated so the UI can be updated with the new data.

Steps

Create a React app.
Create two folders inside src: (components, store)
Install these packages:

 npm i react-redux redux

Store folder should contain a file Redux to create: 1. state 2. actions 3. reducer
another file index to create the store.

I will start creating a state to increase the votes of each name whenever I press on a button.

Create State

Inside redux file, initialize the state:

const initState = {
  developers: [
    { name: "Ahmad", votes: 0 },
    { name: "Zaid", votes: 0 },
    { name: "Raneem", votes: 0 },
  ],
  totalVotes: 0,
};

Create Actions

Create two actions, one to increase the votes and one to reset the votes to zero (don't forget to export it).

We will use the actions when we want to update states.

export const increase = (name) => {
  return {
    type: "INCREASE",
    payload: name,
  };
};

export const reset = () => {
  return {
    type: "RESET",
    payload: null,
  };
};

the best practice is to give the type of increase the same name of action in uppercase.

The payload is specified by asking this question -> What does my action needs to update the state? each time I press on a (name) the votes increase, so the thing responsible for updating the action.

Create Reducers

the reducer takes the state and the action as parameters, initially we will pass the initial state:

const voteReducer = (state = initState, action) => {
  const { type, payload } = action;
};

export default voteReducer;

Go to index.js to start linking store to my app:
import (Provider) to provide the state and the action that is going to update the state to my app.

 import { Provider } from 'react-redux';

import the store.
Render it as a container for the App "wrap it". pass to it store "which is built in" and ={store}

This step is to make sure everything inside my app can access my store.

Add a components file for total votes and another file to display names and votes for each developer and make an update state while clicking on their names.

Votes component

Developers component

Add the components in App.js.
Run npm start to see changes in browser.

Reference

REDUX REFERENCE

Redux | Basic Concept With Implementation

React | JavaScript

Table of contents