Ads Top

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:




1 comment:

Copyright Reserved to Anything Learn. Powered by Blogger.