DEV Community: Devyank Nagpal

REDUX

Devyank Nagpal — Wed, 19 Jan 2022 19:53:31 +0000

A predictable state application for JavaScript application
In Simple words-it provide one single place to store all the states and that place is known as store
Store : It is a single state object responsible for entire state of your application .This mean if you have react app with some components and each have its own state ,then the entire react state will be managed by the store. That means if we have to make changes in any of the state we can do it through the store only.

Data in redux flow unidirectional

Main Topics in Redux

Actions
Actions are basically JavaScript object .They just tell us what type of event is to be performed but they don’t tell us how to perform that particular event.

Reducers
These are basically the functions which perform the operation according to the type of action ,
it takes state and action as argument and return the updated state.

Store
The redux store brings together state , reducers and actions . This basically keeps the react-redux family together 💙

Syntax to declare store-const store=Redux.createStore(reducer);

To declare store in redux we make use ofcreateStore method it takes reducer as an argument

In my opinion learning is better when we learn something by working on it . So let my dive you through the counter project with the help of which your understanding of redux will hopefully get better.

Firstly will be creating our Actions

export const Incnumber=()=>{
return {
type:'increment'
}
}
export const Decnumber=()=>{
return {
type:'decrement'
}
}

So as you can see here I have created two function for incrementing(Incnumber) and decrementing(Decnumber) the value.

Now moving to the next step creating the reducer file

const initialstate=0;
const changethenumber=
(state=initialstate,action)=>
switch(action.type){
case 'increment':
return state+1;
case 'decrement':
return state-1;
default : 
return state;
}
}
export default changethenumber;

So as we can see here reducer function taking argument state and action then according to the type of action changing the state.

Generally in complex application there are many reducer so to combine the all reducers into single reducer to send them to the createStore we make use of combineReducers.In order to do this will have to importcombineReducers from redux.

import changethenumber from './Updown'
import { combineReducers } from "redux";
const rootreducers=combineReducers({changethenumber})
export default rootreducers;

As we are set with Actions and Reducers its time to pass our reducer to store

import { createStore } from "redux";
import rootreducers from "./reducers";
const store=createStore(rootreducers, 
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

Here first we are importing createStore from redux as we know it is used to define store and takes reducer as an argument.

After setting our action ,reducer and store its time to provide our store to app

So, in this step will make use of component it males redux store available for any nested component.

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

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

as we have provided our store to app now we can access any state from the app.js itself .Once we are done with this, with the help of redux dev tool we can check the action ,state of our app in the console . As shown in the given image its showing our changethenumber reducer.

Here comes the use of useSelector and useDispath

`useSelector`

It takes state as an argument and return the data from state

`useDispatch`

It plays the important role it takes action object as an argument ,whenever we pass an action object the dispatch calls our reducer and passes in the current state to make changes in that state.

import './App.css';
import { useDispatch,useSelector } from 'react-redux';
import {Incnumber,Decnumber} from './actions/index'
function App() {
const mystate=useSelector((state)=>state.changethenumber)
const dispatch=useDispatch();
return 
(
<div className="container"><h1>Increament/Decreament Counter</h1>
<h4>Using React and Redux</h4>
<div className="quantity">
<a 
className='quantity_minus' 
title='Decreament'
 onClick={()=>dispatch(Decnumber()) }>
<span>-</span>
</a>
<input name='quantity' className='quantity_input' type="text" value={mystate} />
<a 
onClick={()=>dispatch(Incnumber()) } 
className='quantity_plus'
 title='Increament'>
<span>+</span>
</a>
</div>
</div>);
}
export default App;

As we can clearly observe in the app.js file that with the help of useSelector we have passed our

changethenumber reducer and with the help of dispatch we have passed the action object.

💙

Context Hook

Devyank Nagpal — Sun, 16 Jan 2022 07:22:06 +0000

It helps in providing data to components.
Generally in react what happens that whenever we our working on a small project the data is passed from parent to child , where we have one or two component we can easily make use of props to pass the data.

But when it comes to big project when there are no of components and we have to pass the data which will be used by almost every component or we don’t have to pass data in hierarchy then passing data through the props become little bit unmanageable so in order to prevent this context provides a way to pass the data to different components

context is majorly used when the data is global let me take you through an example suppose you are calling an Api and different components are accessing different data of the Api then you just can’t manually pass the data through props you need a proper system to manage your data flow so that it can be easily accessed by every component.

When To use Context?

the image shown below is enough to tell you when to make use of it

let me dive you through a project with which your understanding towards it will get better and will also be introducing you to the createcontext and context.provider

import React, { createContext, useContext, useEffect, useState } from 'react'
// import { useNavigate } from 'react-router-dom';


const Food=createContext();

const key="d90a7bf3";
const API="b1d3f3b888a6b98ec1aa24c610480f2f";
const FoodContext = ({children}) => {

    const [recipes, setrecipe] = useState([]);
    const [search, setsearch] = useState("");
    const [query, setquery] = useState('');
// const navigate=useNavigate();

    useEffect(()=>{
        getrecipes();
      },[query]);

      const updatesearch=e=>{
        setsearch(e.target.value);

      }
      const getrecipes=async()=>{
      const response =await fetch(`https://api.edamam.com/search?q=${query}&app_id=${key}&app_key=${API}`);
      const data=await response.json();
      setrecipe(data.hits);
      }

    return (
        <Food.Provider value={{setquery,recipes,search,setsearch,updatesearch}}>
            {children}
        </Food.Provider>
    )
}

export default FoodContext

export const FoodState=()=>{
    return useContext(Food);
}

This is our foodcontext.js

const Food=createContext(); talking about this here we are doing nothing just calling api createContext from react.

Moving further as you can see we are making an api call and accessing the data from the api which is to be accessed by different components.

Here comes the Food.Provider basically in context with the help of it we pass the data to the descendants . It takes value as an prop where we refer to the data which we have to actually pass to the components.

Now comes the useContext so up till now we have done everything we have call the api and passed the data but the most important thing left that we also have to use that data here useContext plays a significant role it helps in using the data which is passed through the context.

Once we are done with all this we have to put our app.js inside the FoodContext.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import FoodContext from './FoodContext';
// import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <FoodContext>
    <App />
    </FoodContext>
  </React.StrictMode>,
  document.getElementById('root')

When we are done with all this we are finally left with using the data in a particular component

import React from 'react'
import { useNavigate } from 'react-router-dom';
// import { Link } from 'react-router-dom';
import { FoodState } from '../FoodContext'
// import * as React from 'react';

const Header = () => {
    const navigate=useNavigate();

    const {setquery,setsearch,search,updatesearch}=FoodState();

    const getsearch=(e)=>{
        e.preventDefault();
        setquery(search);
       navigate("/food");
        setsearch('');
      }

    return (
        <div className="navbar">
<div className="text">
    Nagpal's 
</div>
<div className="search">

        <form  onSubmit={getsearch}  className="searchfrom">
        <input className="searchbar" type={search} onChange={updatesearch} />
        <button   className="searchbutton">Search</button>

      </form>
</div>
        </div>

    )
}

So as you can see here we are accessing the data from the context by destructuring the data from FoodState().