Getting Started

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.

export const initialState = {
  value: {
    location: {}
  etc: {},
};

4.) Add createSlice()

Create your slice in the index.js page.

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.

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]. This is added at Line 15-26.

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 = "";
    },
  },
});