-->

  • Reducer in 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


    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 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



     

    Reducer in Redux

     

     

    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

     

     

    Reducer in Redux





    Reducer in Redux



     

    fds
    Reducer in Redux 




      
  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

     


    Reducer in Redux

     

    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


    Reducer in Redux



    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  

     
    thats why we will use if else condition otherwise switch statement but for if-else statement.
     
     
     
     
    Reducer in Redux

     
     
     
     
     Now we will create constant.jsx file if we want to change type key look like this ( type: "ADD_TO_CART") then directly change in one file (constant.jsx file) except in all file.Even in type without use as a string in action.jsx file.





    Reducer in Redux 


    import { ADD_TO_CART } from "./Constant";

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

     

    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.

     

     

    • 0 comments:

    Post a Comment

    For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.