Lesson Plan

Introduction to Redux
Topics

What is Redux?
Why one need Redux?
A simple example to show the working of Redux.
Context API vs Redux.

What is Redux?
Redux is like a centralized brain for your web app. It helps manage the data (information) used in your
application, so everything stays organized and predictable.

The Redux is based on three principles

A single source of truth - The state of your application is stored in a single object, called the store
State is read-only - The only way to change the state is to dispatch an actio
Changes are pure function - they return a new state based on the current state and the action itself.

Why one need Redux?

Imagine your web app as a big puzzle with many pieces (components) that need to work together. Each piece
has its own small brain (state) to remember things. But as the app gets bigger, it becomes harder to keep
track of what each brain knows, and things can get messy.

Redux comes to the rescue! It provides a big, centralized brain (store) where all the important information is
stored. Instead of each puzzle piece having its own brain, they all share this big brain. Now, they can talk to the
big brain and ask for the information they need.

Whenever something changes in the app (like a user clicking a button or data coming from a server), it sends
a message (action) to the big brain. The big brain looks at the message and decides what to do with it. It might
update its information based on the message, or it might just ignore it.

But wait, how do other pieces know if the big brain changes something? That's where listeners (components)
come into play. Puzzle pieces can listen to the big brain and get notified whenever it changes. When they hear
about a change, they update themselves with the new information from the big brain, and the whole app stays
in sync.

So, Redux makes it easier to manage data and make sure all the parts of your web app are working together
smoothly. It promotes a clean and organized way to handle information, which makes it simpler to build and
maintain your web applications.

Full Stack Web Development

A simple example to show the working of Redux
The overall working flow of the Redux is as shown below -















Now, Let's create a simple counter application to show the working of Redux concepts which mainly include
action, store, and reducer

Firstly, create a React App and install redux and react-redux

// create a react app

npx create-react-app redux-demo

// install redux

npm install redux react-redux

Redux actions and action creators -

Create redux actions which are plain JavaScript objects that describe what happened in the application, with a
type property which is a string that identifies the type of action. 

The Actions can also have an optional payload property, which is an object that contains any additional data
that is needed to describe the action

Define action types as contents to ensure consistency

Full Stack Web Development

 // actionTypes.js

export const INCREMENT = 'INCREMENT';

export const DECREMENT = 'DECREMENT';

Create action creators that return action objects

// actions.js

import { DECREMENT, INCREMENT } from "./actionTypes"

export const increment = () => ({

type: INCREMENT

})

export const decrement = () =>({

type: DECREMENT

})

Reducer functions - 

Create a reducer function which is a simple function in javascript that has two arguments - the current state of
the application and an action, and return a new state. The reducer function is responsible for updating the state
of the application in response to actions.

Let's define a reducer function that will handle state changes based on the dispatched actions -

// reducer.js

import { DECREMENT, INCREMENT } from './actionTypes';

const initialState = {

count: 0

};

const CounterReducer = (state = initialState, action) => {

switch (action.type) {

case INCREMENT:

return {

...state,

count: state.count + 1

};

case DECREMENT:

return {

...state,

count: state.count - 1

};

default:

return state;

};

export default CounterReducer

Full Stack Web Development

Store - 

A store in Redux is a central bucket that holds the whole state tree of an application. The state tree is an object
tree that represents the current state of the application. The store is the only place where the state can be
changed, and it can only be changed by dispatching actions.

Now, create a Redux store using the reducer -

// store.js

import { createStore } from 'redux';

import CounterReducer from './reducer';

const store = createStore(CounterReducer);

export default store;

Create React Component -

Now, create a React component with the Redux store and actions.

// Counter.js

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';




const Counter = () => {

const count = useSelector((state) => state.count);

const dispatch = useDispatch();

console.log(count)

const increment = () => {

dispatch({type: "INCREMENT"})

const decrement = () => {

dispatch({type: "DECREMENT"})

return (

<div>

<h1>Counter: {count}</h1>

<button onClick={increment}>Increment</button>

<button onClick={decrement}>Decrement</button>

</div>

);

};

export default Counter;

Full Stack Web Development

Integrating the Components -

Finally, integrate the Counter component into the main React application

//index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import { Provider } from 'react-redux';

import store from './redux/store';

const root =
ReactDOM.createRoot(document.getElementById('root'
));

root.render(

<Provider store={store}>

<React.StrictMode>

<App />

</React.StrictMode>

</Provider>

);

Browser output - click the button to increase and decrease the counter value.








Context API vs Redux.

Context API and Redux are two state management solutions for React applications. They have different
strengths and weaknesses, so the best choice for your project will depend on your specific needs.

Context API is a built-in React feature that allows you to share data between components without having to
pass it down through props. It is a good choice for sharing simple data between a few closely related
components. However, Context API can become difficult to manage in large and complex applications.

Redux is a third-party state management library that provides a more robust solution for complex
applications. It offers features such as centralized state management, predictability, and time-travel
debugging. However, Redux can be more complex to learn and use than Context API.

Full Stack Web Development

When to use Context API
You need to share simple data between a few closely related components
You want a simple and easy-to-use state management solution
You are building a small or medium-sized application.



When to use Redux

You need to manage complex states in a predictable and deterministic way
You are building a large or complex application.

Full Stack Web Development