Creating a new Redux slice

Creating new slice

Step 1:

Create a new folder(example: locationSlice)

Step 2:

Add three files: api.js, index.js, and state.js.

Step 3:

Here, in the state.js, we are adding the initial state.

export const initialState = {
  value: {
    location: {}
  etc: {},
};

Step 4:

Create your slice in the index.js page.

import { createSlice } from "@reduxjs/toolkit";

export const locationSlice = createSlice({
  name: "location",
  initialState,
  reducers: {
    addLocation: (state, action) => {
      state.value.push(action.payload);
    },
    deleteLocation: (state, action) => {
      state.value = state.value.filter((item) => item.id !== action.payload.id);
    },
  },
  extraReducers: {
  [getLocations.pending]: (state) => {
      state.loading = true;
    },
    [getLocations.fulfilled]: (state, { payload }) => {
      state.loading = false;
      state.etc = payload;
    },
    [getLocations.rejected]: (state) => {
      state.loading = false;
      state.error = true;
      state.errormessage = "";
    },
  },
});

Step 5:

Next, we are adding any API-related async thunks in the api.js page.

import { createAsyncThunk } from "@reduxjs/toolkit";

export const getLocations = createAsyncThunk(
  "steps/getLocations",
  async ({ id }, thunkAPI) => {
    const res = await fetch(
      `https://locationsAPI.com/${id}`
    ).then((data) => data.json());
    return res;
  }
);

Afterwards, update the index.js page in the extraReducers section with getLocations[pending], getLocations[fulfilled], and getLocations[rejected].

import { createSlice } from "@reduxjs/toolkit";

export const locationSlice = createSlice({
  name: "location",
  initialState,
  reducers: {
    addLocation: (state, action) => {
      state.value.push(action.payload);
    },
    deleteLocation: (state, action) => {
      state.value = state.value.filter((item) => item.id !== action.payload.id);
    },
  },
  extraReducers: { <-- HERE
  [getLocations.pending]: (state) => {
      state.loading = true;
    },
    [getLocations.fulfilled]: (state, { payload }) => {
      state.loading = false;
      state.etc = payload;
    },
    [getLocations.rejected]: (state) => {
      state.loading = false;
      state.error = true;
      state.errormessage = "";
    },
  },
});