Versions Compared

Old Version 1

changes.mady.by.user Kevin Tran (Unlicensed)

Saved on

compared with

New Version 2

changes.mady.by.user Kevin Tran (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Overview

Navigate to the features/stepSlice folder.

There are 3 seperate separate files:

state.js

This page provides the initialState value.

...

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