Redux Toolkit > Redux Toolkit: removeOne

Missions entity adapter remove one

Let's create a new reducer to destroy missions. Similar to our previous lesson on upsertOne, we're going to use the removeOne function on missionsAdapter to remove the mission. How do we know which mission to remove? Simple: the action.payload here is just the id of the mission.

Check out Mission.js for how we use this. We simply call dispatch(destroyMission(id));. Because our missionsSlice.js is calling removeOne from the missionsAdapter, Redux is going to take care of the rest. The mission is deleted. Goodbye.

This completes basic CRUD operations for our redux app! Take a break, you've earned it.

This app is nice, but it isn't realistic. There's no data fetching to the server happening. Next, we'll talk about how we can get asynchronous behavior in our app.

Lesson 6/6

import { createSlice, createEntityAdapter } from "@reduxjs/toolkit";
import defaultMissions from "./missionData";

const missionsAdapter = createEntityAdapter();

const emptyInitialState = missionsAdapter.getInitialState();
const initialState = missionsAdapter.upsertMany(
  emptyInitialState,
  defaultMissions
);

const missionsSlice = createSlice({
  name: "missions",
  initialState,
  reducers: {
    upsert: (state, action) => missionsAdapter.upsertOne(state, action.payload),
    destroy: (state, action) =>
      missionsAdapter.removeOne(state, action.payload),
  },
});

export const { selectAll: selectAllMissions, selectById: selectMissionById } =
  missionsAdapter.getSelectors((state) => state.missions);

export const { upsert: upsertMission, destroy: destroyMission } =
  missionsSlice.actions;

export default missionsSlice.reducer;

Open Sandbox