Use Redux Store in Functional Components

The most important aspect of React is the State. Greater the flexibility to store and access the State, the more is the convenience. Let’s see how to use Redux to maintain, update and refresh the State across functional components.

Step1. Install redux and react-redux modules

npm install redux
npm install react-redux

Step2. Create the Redux Store. This Component is initialized and maintained by Redux internally.

import { createStore } from 'redux'

//Create the reducerFunction, that takes the initial state, and action as two parameters
const reducerFunction = (state = {
    applicationState : {
        serverName: ''
        }
    }, action) => {
//Check the type of action, and choose how to update and return the new state
    switch (action.type) {
        case 'getServerFailureDetails':
            return {
                applicationState : {
                    serverName: ''
                }
            }
            break;

            case 'updateServer':
                return {
                    applicationState : {
                        serverName: action.serverNameVal
                    }
                }
                break;
    
        default:
            break;
    }

//Return the original state, if no action is matched
    return state
}

const store = createStore(reducerFunction)

export default store

Step3. Write the Functional Component that update the State into Redux Store, and fetch data at the same time

import { useSelector, useDispatch } from 'react-redux'
const Header = (props) => {

//Get a reference to the useDispatch() method, that is used  to update the state for a particular action.
    const dispatch = useDispatch()

//Get the value of a State variable, and store it to a const, to use it later
    const currentServerName = useSelector(state => {
        return state.applicationState.serverName
    })

//Method to handle the submit button click. It gets the user input, and dispatch it's value as State Variable
    const handleSubmit = (event) => {
        event.preventDefault()
        const serverNameEntered = document.getElementById('serverName').value
        dispatch({
            type: 'updateServer',
            serverNameVal: serverNameEntered
        })
        console.log("currentServerName = ", currentServerName);
    }

//Return the JSX Code
    return (
    <>
    <div className="container-fluid bg-primary">
        <div className="row bg-warning text-dark fw-3 fs-3">
            <div className="col">Root Cause Analysis Tool</div>
        </div>
        <form>
            <div className="row m-1 p-3">
                <input id="serverName" name="serverName" placeholder="Enter a server name" className="col-md-10 fs-4 text-muted" style={{borderRadius: '5px', outline: 'none', borderColor: 'transparent'}}></input>
                <button type="submit" className="btn btn-danger col-md-2" onClick={handleSubmit}>Submit</button>
            </div>
        </form>
    </div>

//Display the Value of currentServerName, that is a reference to the serverName State variable
    <p className="text-white fs-1 bg-success">ServerName Entered = {currentServerName}</p>
    </>
    )
}
export default Header

Step4. Last step is to make the Redux Provider available to the top Component, which is index.js, in most cases. Insert the highlighted lines as shown below.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import  store from './redux/redux-store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Step5. That’s it. Now get ready to test. Below is a small video showing the test result.