Page Comparison

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.

...

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/getLocationsgetCrops",
  async ({ idregionId }, thunkAPI) => {
    const res = await fetch(
      `https://locationsAPI.com/${id}`developapi.covercrop-selector.org/v2/crops/?regions=${regionId}&context=seed_calc`
    ).then((data) => data.json());
    return res;
  }
);

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

...

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:

    Code Block
    [getCrops.pending]: (state) => { state.loading =

...

• • false; },

...

• • Fulfilled:

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

...

• • crops = payload.data; },

...

• • Rejected:

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

...

• • ; },

...