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.
Code Block |
---|
export const initialState = {
value: {
location: {}
etc: {},
};
|
Step 4:
Create your slice in the index.js
page.
Code Block |
---|
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.
Code Block |
---|
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
...
; },
...