Overview
Navigate to the features/stepSlice folder.
...
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:
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.
| Code Block |
|---|
import { createAsyncThunk } from "@reduxjs/toolkit";
export const getLocations = createAsyncThunk(
"steps/getLocations",
async ({ id }, thunkAPI) => {
const res = await fetch(
`https://locationsAPI.com/${id}`
).then((data) => data.json());
return res;
}
); |
Afterwards, update the index.js page in the extraReducers section with getLocations[pending], getLocations[fulfilled], and getLocations[rejected].
| 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: { <-- HERE
[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 = "";
},
},
}); |