Creating new slice
Step 1:
...
1.) Create new folder
...
example: features/locationSlice)
...
2
...
.) Add boilerplate files
Add three files: api.js , index.js, and state.js.
...
3
...
.) Add initial state
Here, in the state.js, we are adding the initial state.
| Code Block |
|---|
export const initialState = {
value: {
location: {}
etc: {},
};
|
...
4.) Add createSlice()
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 = "";
},
},
}); |
...
5.) Create async thunk(for API logic)
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] by importing the action, as well as updating the extraReducers.
| Code Block |
|---|
import { createSlice } from "@reduxjs/toolkit";
import { getLocations } from "./api";
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 = "";
},
},
}); |
Line 2 : Import the getLocations() action.
Line 15-27 : Update the index.js page in the extraReducers section with getLocations[pending], getLocations[fulfilled], and getLocations[rejected]
6.) Add the slice to Store
| Code Block |
|---|
import locationSlice from "./features/location/locationSlice"; export const store = configureStore({ reducer: { filter: filterSlice, steps: stepSlice, location: locationSlice }, }); |