Get data in component from redux

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of reducer in redux. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Make Header and main component

# Adding react-icons and  tailwind CSS

# Send data from main component

# Get data in header  component

Make Header and main component

First we will make a two file, first one is Header.jsx and second one is MainHeader.jsx ( not compulsory to save as file name as a same name).

import React from "react";
import { BsFillCartPlusFill } from "react-icons/bs";

  const Header = () => {
 
    return (
        <div>
             <div className="bg-[#434be6] p-4 w-full relative">
        <div className="flex flex-cols justify-end px-2   items-center  ">
          <span className="bg-green-500  rounded-xl px-1 absolute text-[12px] top-[9px]  right-7 text-white border border-black">
        0
          </span>

          <BsFillCartPlusFill size={30} className="" />
        </div>
      </div> 
     
        </div>
    )
}
//www.kumaratuljaiswal.in    www.hackingtruth.in
export  default Header

MainHeader>import React from 'react'
import { addToCart } from '../redux/Action'
import { useDispatch } from 'react-redux';

function MainHeader() {
  const dispatch = useDispatch();
  
  const product = {
    name: 'Motorola',
    type: 'mobile',
    price: 18000,
    color: 'silver'
  }

  return (
    <div>
    
    <div className='max-w-[1240px] mx-auto mt-6 ml-2 '>
    <button className='bg-green-700 text-white p-2'  
     onClick={() => dispatch(addToCart(product))} >Add to Cart</button>
     </div>
    
    </div>
  )
}
//www.kumaratuljaiswal.in    www.hackingtruth.in
export default MainHeader

 If you people have read our previous article blog then you know that perhaps we had created it in App.jsx file but now we will write here in MainHeader.jsx file and call these file in App.jsx  file.

Everything is perfect.

 Now we have to add useSelector hook  and get data from redux store as a state and get output of all state redux. let's check 

import React from "react";
import { BsFillCartPlusFill } from "react-icons/bs";

import { useSelector } from 'react-redux';


  const Header = () => {

  const result = useSelector((state) => state )
  console.log("redux data in header", result);

 return (
        <div>
             <div className="bg-[#434be6] p-4 w-full relative">
        <div className="flex flex-cols justify-end px-2   items-center  ">
          <span className="bg-green-500  rounded-xl px-1 absolute text-[12px] top-[9px]  right-7 text-white border border-black">
        0
          </span>

          <BsFillCartPlusFill size={30} className="" />
        </div>
      </div> 
     
        </div>
    )
}

export  default Header

As you can see above the image, there is one output and the o/p is saying no condition matched, if you have remember and have you seen in our previous blog , we wrote there if no case matched in switch statement then default is our condition run.

Other o/p is saying cartData is 2 just because of in below the image, return 1+1  thats why cartData is 2.

And cartData is our reducer name, as you can see it.

So, if we want the data coming from the action in the return statement, then for this we will create array and using rest operator. Like this -

When we send data to the new array then we first distruct it then send it.

Send data from main component

# Reducer.jsx

import { ADD_TO_CART, REMOVE_TO_CART } from './Constant';

export const cartData = (data = [], action) => {
 

    switch(action.type)
    {
        case ADD_TO_CART:
            // if we have 5 items then want to add more one
            console.log("ADD_TO_CART CONDITION", action)
            return [action.data,  ...data];
        case REMOVE_TO_CART:
            //if we have 5 item then want to remove one item
            return 1-1;
        default:
            return data;
    }
}

//www.kumaratuljaiswal.in #www.hackingtruth.in

 Now evething is allright previous data and current data all are showing with the adding.

Get data in header  component

Now we want cartData from rootReducer and length okay, Like this

import React from "react";
import { BsFillCartPlusFill } from "react-icons/bs";

import { useSelector } from 'react-redux';
 

  const Header = () => {
    const result = useSelector((state) => state.cartData )
    console.log("redux data in header",result);
  
    return (
        <div>
             <div className="bg-[#434be6] p-4 w-full relative">
        <div className="flex flex-cols justify-end px-2   items-center  ">
          <span className="bg-green-500  rounded-xl px-1 absolute text-[12px] top-[9px]  right-7 text-white border border-black">
        {result.length}
          </span>

          <BsFillCartPlusFill size={30} className="" />
        </div>
      </div> 
     
        </div>
    )
}

export  default Header

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

Disclaimer

How to implement css when onClick event occur in Reactjs

In ReactJS, you can implement CSS changes on an onClick event by using state to manage the CSS styles and then updating that state when the event occurs. Here's a step-by-step guide:


1.Create a React component:

import React, { useState } from "react";

import "./CSSViaOnClick.css";
function CSSviaOnClick() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    // Update the state when the button is clicked www.hackingtruth.in 
    setIsClicked(!isClicked);
  };

  // Define CSS classes based on the state www.kumaratuljaiswal.in
  const buttonClass = isClicked ? "clicked" : "unclicked";

  return (
    <div>
      <div className="main-div">
        <button onClick={handleClick} className={buttonClass}>
          Click me
        </button>
      </div>
    </div>
  );
}

export default CSSviaOnClick;

1. First of all we are written and import the two pkg first one is react and another one is css file.

2. In this example, we create a functional component App that uses the useState hook to manage the isClicked state. Initially, it's set to false.

3. We define a handleClick function that will be called when the button is clicked. Inside this function, we update the isClicked state using setIsClicked, toggling it between true and false with each click.

4. Based on the isClicked state, we determine the CSS class to apply to the button. In this case, we have two CSS classes: 'clicked' and 'unclicked', which you can define in your CSS or use CSS-in-JS libraries like styled-components.

5. Finally, we render the button with the onClick event handler and the appropriate CSS class.

Implement CSS

.main-div {

  left: 50%;
  top: 50%;
  text-transform: translate(-50%, -50%);
  position: absolute;
  border: 1px solid black;
  padding: 2px 6px 2px 6px;
  border-radius: 20%;
  font-weight: bold;


}



.clicked {

  color: red;
  letter-spacing: 2px;

}

.unclicked {
  color: blue;
}

Wheneven user click on button then event occur and css works.

Disclaimer

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of reducer in redux. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Why need Switch Statement inside reducer

# Make Switch Statement

# Check some with Switch statement

Why need Switch Statement inside reducer

If you remember something, in this previous blog we have to applied in reducer ADD_TO_CART option when user cilck on cart then item will be added to the cart. Like this

Reducer Link - CLICK HERE

 But there is problem becuase of if we have so many cart option like ADD_TO_CART, UPDATE_TO_CART, DELETE_TO_CART etc then that time we can't use so many if-else-elseif statement just because it's increase the complexity of our program and this is suitable for developers also.

So, for this we will use Switch Statement.

Make Switch Statement

If you have remember something there is some cases in switch statement, so lets started.

import { ADD_TO_CART, REMOVE_TO_CART } from './Constant';

export const cartData = (data = [], action) => {
 

    switch(action.type)
    {
        case ADD_TO_CART:
            // if we have 5 items then want to add more one
            console.log("ADD_TO_CART CONDITION", action)
            return 1+1;
        case REMOVE_TO_CART:
            //if we have 5 item then want to remove one item
            return 1-1;
        default:
            return "no condition matched";
    }
}

//www.kumaratuljaiswal.in #www.hackingtruth.in

This way is to write switch case statement and that matched from Action.jsx file because of user want add to cart item then that case statement and inside written logic run there.

Watch Full Tutorial

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

Disclaimer

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of reducer in redux. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# What is Reducer in Redux

# Make Reducer

# Make RootReducer

# Test Data Flow

What is Reducer in Redux

 # Reducer handle data for store, actually when we send the data from react to action then how to send the data to the store, its decided by reducer so that's why after making action we will create reducer file and all code are implement.

# Update data in store - Suppose that we have 5 data in cart, if we add one more data or remove the data, then we need to manage for this update.

# Rules

    # Need root reducer

    # Reducer must return the some value

    # The reducer must have some initial value

Make Reducer

we will create reducer and rootReducer and then changes in store file because of in previous blog we have already implement dummy data store then now we are ready to changes in this file according to reducer.jsx

  
  import { combineReducers, createStore } from "redux";
import RootReducer from "./RootReducer";

const Store = createStore(RootReducer)

export default Store

//www.kumaratuljaiswal.in #www.hackingtruth.in

  

But there is some error lets check

 

 

Uncaught Error: The slice reducer for key "cartData" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.

this says that Reducer must return the some value

But the problem here is that how will the reducer know which reducer will be called from which action file like - 

  
  
  
export const cartData = (data = [], action) => {
    
    if(action.type === "ADD_TO_CART")
    {
        console.log("reducer called", action)
        return action.data
    } else {
        return "no action matched"
    }
}

//www.kumaratuljaiswal.in #www.hackingtruth.in
  

addToCart

removeFromCart 

emptyCart  

 

import { ADD_TO_CART } from "./Constant";

export const addToCart = (data) => {
    console.log("action called", data);
    return {
    type: ADD_TO_CART,
    data: data
}
}

Hello viewers, i am back again for you and now we will start from redux-saga. So, we will teach first how to install redux and saga packages and after that we are ready for implemenation of redux-saga. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# What is Action in Redux

# Make action function

# Call action function

What is Action ?

# Actions are the plain functions.

# Get data from reactjs

# Send data to reducer after process

# Must have type key in return statement

# Much sync types with reducer

But why we don't keep data directly into reducer, just because of reducer is not capable to get data from reactjs directly.

Make action function

export const addToCart = () => {
    console.log("action called");
    return "www.hackingtruth.in"
}

1. 'export const addToCart = () => {: This line defines a JavaScript function named addToCart. The export keyword suggests that this function is intended to be used in other parts of the codebase, likely in a different module or file. The function is defined as an arrow function.

2.  console.log("action called");: This line logs the text "action called" to the console when the addToCart function is called. It's a common practice to use console.log for debugging purposes to check if a function is executed or not.

3.  return "www.hackingtruth.in";: This line returns the string "www.hackingtruth.in" as the result of the addToCart function.

import React from 'react'
import { addToCart } from './redux/Action'
import { useDispatch } from 'react-redux';

function App() {
  const dispatch = useDispatch();
  return (
    <div>
    
    <div className='max-w-[1240px] mx-auto mt-6 '>
    <button className='bg-green-700 text-white p-2'  
     onClick={() => dispatch(addToCart())} >Add to Cart</button>
     </div>
    
    </div>
  )
}

export default App

1. import Statements:

# import React from 'react': This imports the React library, which is necessary for creating React components and using JSX syntax.

# import { addToCart } from './redux/Action': This imports the addToCart function from the './redux/Action' module. This function likely represents an action creator in Redux, responsible for dispatching actions to update the state.

# import { useDispatch } from 'react-redux': This imports the useDispatch hook from the 'react-redux' library. The useDispatch hook is used to obtain the dispatch function from the Redux store, allowing components to dispatch actions.



2. React Component:

# function App() { ... }: This defines a functional React component named App. This component represents a part of the user interface.

# const dispatch = useDispatch();: This line initializes a dispatch variable using the useDispatch hook. This hook is used to access the dispatch function provided by Redux. The dispatch function is crucial for triggering actions that will eventually update the Redux store's state.

# Within the component's return statement, there's a <button> element with an onClick event handler.

# onClick={() => dispatch(addToCart())}: This sets up an event handler that is executed when the button is clicked. When the button is clicked, it calls the dispatch function with the result of calling the addToCart function. This effectively dispatches an action to the Redux store.



3. Export:

# export default App: This line exports the App component as the default export of this module, making it available for use in other parts of the application.

But if we run this program action is called successfully but we got an error look like this -  Actions must be plain objects.

To fix this error we will use type and key in action.

export const addToCart = () => {
    console.log("action called");
    return {
    type: 'ADD_TO_CART',
    data: "1 item"
}
}

 Then in the next blog we will send the data to the reducer but for now we have a dummy data and implement it in app.jsx file. 

App.jsx

import React from 'react'
import { addToCart } from './redux/Action'
import { useDispatch } from 'react-redux';

function App() {
  const dispatch = useDispatch();
  
  const product = {
    name: 'Motorola',
    type: 'mobile',
    price: 18000,
    color: 'silver'
  }

  return (
    <div>
    
    
    <button onClick={() => dispatch(addToCart(product))} >Add to Cart</button>
    
    
    </div>
  )
}

export default App

 Action.jsx

export const addToCart = (data) => {
    console.log("action called", data);
    return {
    type: 'ADD_TO_CART',
    data: data
}
}

Now it is finally running and all are done. After this blog we will make Reducer file and etc.

Watch Full Tutorial

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

Disclaimer

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

React

Certainly, reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.


Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.


Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.


JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.



Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.


React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.


State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.



ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community. 

Each child in a list should have a unique "key" prop 

When we use this code like this we got an error in our outpage page "Each child in a list should have a unique "key" prop" 

function MapWithBoxes() {
  const [movies, setMovies] = useState([1, 2, 3, 4, 5]);
  const boxes = movies.map(() => {
    return <Box/>
  });

The "Each child in a list should have a unique 'key' prop" warning in React occurs when you render a list of components or elements (e.g., within a map function) without specifying a unique key prop for each item. React uses the key prop to efficiently update and reconcile the virtual DOM when items in a list change, so it's essential to provide a unique key for each item.

To fix this warning, you need to assign a unique key to each element or component you're rendering in the list. Typically, you can use a unique identifier from your data or the index of the item as the key. Here's how you can fix it in your MapWithBoxes component:

function MapWithBoxes() {


  const [movies, setMovies] = useState([1, 2, 3, 4, 5]);
  const boxes = movies.map(
    (item, index) => {
        return <Box key={index} />
    }
)

 OR

function MapWithBoxes() {


  const [movies, setMovies] = useState([1, 2, 3, 4, 5]);
  const boxes = movies.map(
    (item, index) => {
        return <Box key={item.id} />
    }
)

In this example, I'm using the item itself as the key since the movies array appears to contain unique items.

Disclaimer

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

React

How to make boxes using map and useState in reactjs

This is a React functional component named MapWithBoxes that renders a list of boxes using the map method and a Box component. Let's break down the code and explain each part:


1. Import Statements:

import React, { useState } from "react";

 
The code imports the React library and the useState hook from React. useState is used to manage state within functional components.

 

2. MapWithBoxes Component:

function MapWithBoxes() {

 
This defines a functional component named MapWithBoxes.

 
3. State Management:

const [movies, setMovies] = useState([1, 2, 3, 4, 5]);

 
This line initializes a piece of state named movies using the useState hook. The initial state is an array [1, 2, 3, 4, 5], which represents a list of movies (though the actual content is not used in this example).

 

4. Mapping Over Movies:

const boxes = movies.map(() => {
  return <Box />
});

 

This code uses the map function to iterate over the movies array. For each item in the array, it creates a Box component. The key prop is set to the index to help React efficiently update and render these components.


5. JSX Rendering:

return (
  <div/>
    <div className="max-w-[1240px] shadow-2xl min-h-[400px] mx-auto p-3 "/>
      {/* Input Element */}
    <input
        type="search"
        className="w-full border border-black rounded text-slate-500 p-4"
      />

      {/* Grid of Boxes */}
      <div className="w-full grid grid-cols-4 gap-5">{boxes}</div/>
    </div/>
  </div/>
);

Inside the return statement, there is JSX code that defines the component's layout.

It includes an input element for searching (though it doesn't have any functionality in this example).

The boxes array of Box components is rendered within a grid layout using the CSS classes provided.



6. Box Component:
 

const Box = () => {
  return <div className="shadow min-h-[200px] border border-black mt-3"/></div/>;
};

 

This defines a separate functional component named Box.

The Box component renders a <div> element with some CSS classes to create a box-like appearance with shadows and borders.

Output

In summary, this React component MapWithBoxes renders a list of boxes using the map function to iterate over an array of movie items. Each box is created using the Box component, and the resulting boxes are displayed within a grid layout. This code example is a simplified template and doesn't include any actual movie data or search functionality.

Disclaimer

 ES6 Gives us a new syntax for defining functions using a fat arrwo. Arrow fucntions bring a lot of clarity & code reduction.

ES6 is different version of the ECMAScript specification. Which is the standard that defines the scripting language that javascript is based on.

ES6 release on 2015 and there are so many features Arrow function, classes, let and const for variables.

React

How to API calling in Reactjs

The code you provided is a React component called APICalling that fetches data from a movie API using the Axios library and displays it on the screen. 

1. Import Statements:

import axios from 'axios';
import React, { useEffect, useState } from 'react';

The code imports the axios library, which is a popular JavaScript library for making HTTP requests.

It also imports React's useEffect and useState hooks, which are used to manage state and handle side effects in a functional component.

 
2. APIURL Constant:

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

This constant holds the URL of the movie API endpoint you want to fetch data from. It includes a query parameter for sorting movies by popularity, an API key, and a page number.



3. State Management:

const [search, setSearch] = useState("");

 
The useState hook is used to declare a state variable named search and its corresponding setter function setSearch. This state variable will be used to manage the search term.

4. getAllMovies Function:

const getAllMovies = () => {
    axios.get(APIURL)
    .then(
        (response) => {
            console.log(response.data.results);
            setSearch(response.data.results);
        }
    )
    .catch(
        (error) => {
            console.log(error);
        }
    )
}

getAllMovies is a function that makes an HTTP GET request to the APIURL using Axios.

When the request is successful, it logs the movie data received from the API and sets the search state with the movie results.

If there is an error in the request, it logs the error.



5. useEffect Hook:

useEffect(
    () => {
        if (search === "") {
            getAllMovies();
        } else {
            // getSearchedMovies();
        }
    },
    [search]
)

 

The useEffect hook is used to perform side effects in the component. In this case, it's used to fetch movie data when the search state changes.

The useEffect is set up with a dependency array [search], which means it will be triggered whenever the search state changes.

If the search state is empty, it calls the getAllMovies function to fetch the most popular movies. If search has a value, it could be used to implement searching for movies, but this part of the code is currently commented out (// getSearchedMovies();).




6. Render:

return (
   <div>APICalling</div>
)
 

 

The component's render function simply returns a <div> element with the text "APICalling". This is the content that will be displayed on the screen when this component is rendered.

Full Code

import axios from 'axios';
import React, { useEffect, useState } from 'react'
const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

function APICalling() {

    const [search, setSearch] = useState("");

    const getAllMovies = () => {
        axios.get(APIURL)
        .then (
            (response) => {
                console.log(response.data.results);
                setSearch(response.data.results);
            }
        )
        .catch(
            (error) => {
                console.log(error)
            }
        )
    }

    useEffect(
        () => {
            if(search === "") {
                getAllMovies();
            } else {
                //getSearchedMovies();
            }
        },
        [search]
    )
      
  return (
    <div>APICalling</div>
  )
}

export default APICalling

 
In summary, this React component fetches movie data from an API when it's mounted or when the search state changes (though the search functionality is currently commented out), and it logs the results to the console. The actual movie data is stored in the search state variable, which can be used for rendering movie information in the component's UI.

Output

Disclaimer