Action in redux

 

 

  

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

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.

 

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

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.