Creating an API Thunk

Step 1:

Navigate to the features/stepSlice folder.

There are 3 seperate 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;
        },