React JS Redux - School4Tech

: Redux is an open-source JavaScript library used tomanaes application state with a unidirectional data flow
It combines the popular React library, which is used for building user interfaces, with the Redux state management library.

Redux offers a centralised store(Single point of truth) for maintaining and updating application state as well as a way to control the flow of data into and out of the store, whereas React offers a method for creating and rendering UI components. You can build data-driven applications that are simple to manage and debug by combining React and Redux.

Redux Architecture

Below is an explanation of the Redux architecture’s components.

STORE: it is also known as single point of truth. A store is a location where your application’s whole state is listed. It has a dispatch (action) function and handles the application’s status.
ACTION: The view sends or dispatches actions, which are payloads that reducers can read. It is a pure object designed to keep track of user event data. It contains details on the sort of activity, the time and place of the action, its coordinates, and the state it seeks to alter.
REDUCER: The reducer reads the actions’ payloads and modifies the store via the state as necessary. Returning is a pure function with new state from initial one

Here is a simple example of using Redux in a React application:

First, install the Redux library by running npm install redux in your terminal.

Below is the sample code:

import React from 'react';
import { useSelector, useDispatch, Provider } from 'react-redux';
import ReactDOM from 'react-dom/client';
import { createStore } from 'redux';
const initialState = {
  count: 0
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
};
const store = createStore(reducer);
const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };
  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
function App() {
  return (
    <Provider store={store}>
    <Counter />
  </Provider>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));   //creating a root React component in your application
root.render(<App />)                                                 // rendering React components into a DOM node.

import React from 'react';

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

import ReactDOM from 'react-dom/client';

import { createStore } from 'redux';

const initialState = {

};

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

switch (action.type) {

case 'INCREMENT':

return {

};

case 'DECREMENT':

return {

};

default:

return state;

}

};

const store = createStore(reducer);

const Counter = () => {

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

const dispatch = useDispatch();

const increment = () => {

dispatch({ type: 'INCREMENT' });

};

const decrement = () => {

dispatch({ type: 'DECREMENT' });

};

return (

<div>

<h1>{count}</h1>

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

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

</div>

);

};

function App() {

return (

</Provider>

);

}

const root = ReactDOM.createRoot(document.getElementById("root")); //creating a root React component in your application

root.render(<App />) // rendering React components into a DOM node.

Output:

This is just a simple example of how you can use Redux with React. There is much more to learn and explore in both libraries.

In this above example, if an INCREMENT action is dispatched to the store, the reducer function will return a new state with the count field incremented by 1. If a DECREMENT action is dispatched, the reducer function will return a new state with the count field decremented by 1. If any other action type is dispatched, the reducer function will return the current state without any changes.

Leave a Comment Cancel Reply