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: