About Lesson
In this section, we are going to combine the API with the UI Design and make our application dynamic. We’ll fetch data and make POST requests using axios. And also we’ll be covering Redux Toolkit in depth.
import { createSlice } from "@reduxjs/toolkit";
export const productSlice = createSlice({
name: "product",
initialState: {
products: [],
isFetching: false,
error: false,
},
reducers: {
//GET ALL
getProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
getProductSuccess: (state, action) => {
state.isFetching = false;
state.products = action.payload;
},
//DELETE
deleteProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
deleteProductSuccess: (state, action) => {
state.isFetching = false;
state.products.splice(
state.products.findIndex((item) => item._id === action.payload),
1
);
},
//UPDATE
updateProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
updateProductSuccess: (state, action) => {
state.isFetching = false;
state.products[
state.products.findIndex((item) => item._id === action.payload.id)
] = action.payload.product;
},
//ADD
addProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
addProductSuccess: (state, action) => {
state.isFetching = false;
state.products.push(action.payload);
},
failure: (state) => {
state.isFetching = false;
state.error = true;
},
},
});