How to use reducer in react

Reducer example

Store Name you can give  as you wish as like any medical store, general store but here is I am using “Store” which will be export and use another pages. As below line:

export const Store = React.createContext(null)

mystore.js

import React, {useReducer} from 'react'

export const Store = React.createContext(null)

const showStDetails = {

    stList : [

        {stName: 'Sheo', stPhone: '9312875694'}

    ]

}

const updateStData = (state, action) => {

    switch(action.type){

        case "add" :

            return {stList : state.stList.concat(action.payload)}

        default :

            return state

    }

}

export default (props) => {

    const [studentdata, dispatchStData] = useReducer(updateStData, showStDetails)

    return(

        <Store.Provider value={{studentdata, dispatchStData}}>

            {props.children}

        </Store.Provider>

    )

}

Next, I have created a file “add student data” and its data will show on another page. My data is submitted via “useRef” hooks. As below code. When storing my data in the store then I use “useContext” hooks. Stored data will access to other pages.

addStudents.js

import React,{useContext, useRef} from 'react'

import {Store} from '../mystore'

export default () => {

    const {dispatchStData} = useContext(Store)

    const stNameNew = useRef()

    const stPhoneNew = useRef()

    const addStudent = () => {

        return(

            dispatchStData ({type:'add', payload:{stName:stNameNew.current.value, stPhone:stPhoneNew.current.value}})

        )

    }

    return(

        <>

            <input type="text" placeholder="Student Name" ref={stNameNew} />

            <input type="tel" placeholder="Student Phone" ref={stPhoneNew} />

            <button onClick={addStudent}>Add Student</button>

        </>

    )

}

Next step needs to access data as we have stored in the store, so I have created a new page where will show data “showStudent” as below example code:

showStudent.js

import React, {useContext} from 'react'

import {Store} from '../mystore'

export default () => {

    const {studentdata} = useContext(Store)

    const renderStDetails = () => {

        return studentdata.stList.map( item => (

            <tr>

                <td>{item.stName}</td>

                <td>{item.stPhone}</td>

            </tr>

        ))

    }

    return (

        <table>

            <tbody>

                {renderStDetails()}

            </tbody>

        </table>

    )

}

Now need to add all component in the App.js file as I have added in the below code:

App.js

import React from 'react';

import Store from './mystore'

import AddStudents from './components/addStudents'

import ShowStudents from './components/showStudent'

function App() {

  return (

    <div className="App">

    <Store>

      <AddStudents/>

      <ShowStudents/>

    </Store>

    </div>

  );

}

export default App;

When you will start you server using with command “npm start” then you will found your result as below screenshot: