Creating a new Redux slice

Overview

Navigate to the features/stepSlice folder.

There are 3 separate files:

state.js

This page provides the initialState value.

api.js

This page provides API action logic.

export const getCrops = createAsyncThunk(
  "steps/getCrops",
  async ({ regionId }, thunkAPI) => {
    const res = await fetch(
      `https://developapi.covercrop-selector.org/v2/crops/?regions=${regionId}&context=seed_calc`
    ).then((data) => data.json());
    return res;
  }
);

index.js

This contains the stepSlice object that creates a slice using the createSlice() function.

Parameters:

name: “steps”
initialState: (imported from state.js page)
reducers: we add both the action and reducer effect here.
- Example: updateAllSteps

extraReducers: we list our reducer states here with three types: pending, fulfilled, rejected.

Pending:

[getCrops.pending]: (state) => {
      state.loading = false;
    },

Fulfilled:

[getCrops.fulfilled]: (state, { payload }) => {
      state.loading = false;
      state.value.crops = payload.data;
    },

Rejected:

[getCrops.rejected]: (state) => {
      state.loading = false;
      state.error = true;
    },

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 = "";
    },
  },
});