useReducer Hook In React – useState VS useReducer

As we all know that React JS have lots of Hook functions, so in this blog we are going to learn one of the useful hooks useReducer hook. useReducer is used for state management in React JS applications. For React Developers, knowledge of useReducer hook is very important if they want to succeed in the react interview.

Hooks In React JS

• useState – State
• useEffect – Side Effects
• useContext – Context API
• useRef – Reference Of an element
• useReducer – Reducers
• We often use useReducer hook in React-Redux library.

useReducer Hook In React JS

• useReducer is a hook which is used for State Management.
• useReducer is an alternate to useState
• useState is built using useReducer.
• useState uses useReducer internally.
• useState is a basic Hook for managing simple state transformation, and useReducer is an additional Hook for managing more complex state logic.
• you could use useReducer for everything you can do with useState
• useReducer hook uses reducers as its parameter.
• Reducers are pure functions in React JS.

Source Code Of useReducer Hook In React Application

Reducers.js File Code

import React, { useReducer } from 'react'

function Reducers() {
    const initialState = 0;
    const reducer = (state, action) => {
        switch (action) {
            case 'increment':
                return state + 1
            case 'decrement':
                return state - 1
            case 'reset':
                return initialState
            default:
                return state

        }
    }
    const [count, dispatch] = useReducer(reducer, initialState);
    return (
        <>
            <h1>Count = {count}</h1>
            <button onClick={() => dispatch('increment')}>Increment</button>
            <button onClick={() => dispatch('decrement')}>Decrement</button>
            <button onClick={() => dispatch('reset')}>Reset</button>
        </>
    )
}

export default Reducers

App.js File Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import ClassState from './ClassState';
import FormikForm2 from './FormikForm2';
import ReactBS from './ReactBS';
import GridBS from './GridBS';
import ImagesDemo from './ImagesDemo';
import CardsBS from './CardsBS';
import MyNavbar from './MyNavbar';
import MyCarousel from './MyCarousel';
import Reducers from './Reducers';


function App() {
    return (
        <div>
         <Reducers/>
        </div>
    )
}

export default App

Download Notes Of This Blog From the link given below

https://www.mediafire.com/file/k7yqr9sothk5bjt/81+-+useReducer.pptx/file

Download Source Code of This Blog From the link given below