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.
| Code Block |
|---|
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:
| 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;
}, |
Creating new slice
Step 1:
...