Giter VIP home page Giter VIP logo

asyncthunk's Introduction

AsyncThunk Implimantation

Why AsyncThunk
  • Its provide some extra features for the api requests.
  • Inbuilt support inside redux so no need to install extarnal middlewares.
  • Internally use emmer.js so no need to make copy of original state.
  • That's why no need to use of mutation. ex : [...oldState,newValue] instead of oldstate.push(newValue).

create feature/api.js

  • Sapreate file for network request.
    export function fetchItems() {
      return axios.[get,post,delete,patch]("http://localhost:8080/cart");
    }

import AsyncThunk and ApiFunction in Feature/slice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { fetchItems } from "./api.js";

Initialization

const initialState = {
  items: [],
  status: "idle",
};

Fetching data using createAsyncThunk function

export const fetchCartItems = createAsyncThunk("cart/fetchItems", async () => {
  const response = await fetchItems();

  // The value we return becomes the `fulfilled` action payload
  // same line for the pending , rejeted
  return response.data;
});

Reducers , Builder function and action slice

  • Builder callback provide some extra features for api.
  • Like Fullfiled,Rejected,Pending.
  • So we directly set variable inside builder function
export const carttSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchCartItems.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchCartItems.fulfilled, (state, action) => {
        state.status = "idle";
        state.items = action.payload;
      }).addCase(fetchCartItems.rejected, (state, action) => {
        state.status = "idle";
        state.items = action.payload;
      })

  },
});

export default carttSlice.reducer;

Same toolkit binding with react.

ESLint installation in vite app

Eslint DEV.to Blog Post

asyncthunk's People

Contributors

1nevil avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.