Implement Select-All - RTK and Redux slice

[dhlavaty]

I'm trying to use RTK Query and Redux Toolkit the way it was designed. But already, with a very simple example, I came across the need to share data between slices / reducers (considered as anti-pattern, of course).

Let's take for example the application from this video ( Let’s Learn Modern Redux! (with Mark Erikson) ; source code: https://github.com/learnwithjason/lets-learn-redux-toolkit ). A simple application that loads and displays a list of dog breeds. Easy.

I want to implement a common "Select dog" feature - a simple checkbox next to each dog, where the end-user can select any number of dogs he likes. (Imagine selecting multiple emails in GMail for example).

As list of dogs is coming from RTK (createApi()), I have to create a new slice (createSlice()) that will store id's of currently selected dogs. Easy, it could look like this:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface SelectedState {
  selectedBreedIds: {
    [k: string]: boolean;
  };
}

const initialState: SelectedState = {
  selectedBreedIds: {},
};

const selectedBridesSlice = createSlice({
  name: "selectedBridesSlice",
  initialState,
  reducers: {
    breedSelected(state, action: PayloadAction<string>) {
      state.selectedBreedIds[action.payload] = true;
    },
    breedDeselected(state, action: PayloadAction<string>) {
      delete state.selectedBreedIds[action.payload];
    },
	allBreedsSelected(state) {
      // TODO: How to implement?
    }
  },
});

export const { breedSelected, breedDeselected } = selectedBridesSlice.actions;
export default selectedBridesSlice.reducer;

But now, I want to implement 'Select All' and 'Deselect All' functionality ( again, imagine GMail functionality ).

Note: Let's skip options to store boolean flags allBreedsSelected in a redux store or similar approaches. That will not allow us to implement other functionalities later. ( Like the user can select-all and then deselect one particular breed ; we can have pagination in our app ). We always want to store a list of selected ids.

I want to follow Redux Style Guide - keep as much logic in reducers as possible, do not send a list of ids "from-the-frontend", ...

How to load a list of all breed ids from apiSlice in selectedBridesSlice?

[phryneas]

Why not create the special value "all"? Your slice probably doesn't really need to know all those IDs.

[dhlavaty]

Because the user can select-all, and then deselect one particular and it still should work correctly. This is just one problem with value "all", there are more. I mention it in the NOTE section.

[dhlavaty]

OK, let me share my version. It works; that is not the problem. The question is if this is the correct/Redux Toolkit/RTK agnostic way of doing it. Because I personally have many doubts.

// selected-brides-slice.ts
import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../../app/store";
import { Breed } from "./dogs-slice";

interface SelectedState {
  selectedBreedIds: {
    [k: string]: boolean;
  };
}

const initialState: SelectedState = {
  selectedBreedIds: {},
};

export const allBreedsSelectionChanged = createAsyncThunk(
  `selectedBridesSlice/allBreedsSelectionChanged`,
  async (_, thunkAPI) => {
    // TODO: How-to property typescript-type these?
    const rootState = thunkAPI.getState() as RootState;
    const data = (rootState.api.queries["fetchBreeds(undefined)"]?.data as Breed[]) ?? [];

    // read all breed ids from `apiSlice`
    return data.map((breed: Breed) => breed.id);
  }
);

const selectedBridesSlice = createSlice({
  name: "selectedBridesSlice",
  initialState,
  extraReducers: (builder) => {
    builder.addCase(allBreedsSelectionChanged.fulfilled, (state, action) => {
      if (Object.keys(state.selectedBreedIds).length <= 0) {
        // select all
        action.payload.forEach((id) => {
          state.selectedBreedIds[id] = true;
        });
      } else {
        // de-select all
        state.selectedBreedIds = {};
      }
    });
  },
  reducers: {
    breedSelected(state, action: PayloadAction<string>) {
      state.selectedBreedIds[action.payload] = true;
    },
    breedDeselected(state, action: PayloadAction<string>) {
      delete state.selectedBreedIds[action.payload];
    },
  },
});

export const { breedSelected, breedDeselected } = selectedBridesSlice.actions;
export default selectedBridesSlice.reducer;


// -----------------------------------
// usage:
dispatch(allBreedsSelectionChanged());

How it works

It uses createAsyncThunk, which has access to the whole Redux store with .getState(). It loads all breed ids, and fulfills it with them. Then in extraReducers, I select or de-select the correct breeds.

My doubts

1. Sharing data between slices/reducers is considered an anti-pattern. I think it would be much better to add additional actions into RTK / createApi(), where I would implement select-logic.

2. Force typing ( as RootState and as Breed[] ) is not nice. It just disables typescript checking all together. But I haven't found a better way yet.

[markerikson]

@dhlavaty note that we have docs on typing createAsyncThunk here:

• https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk

Note that you don't have to use createAsyncThunk here. You could use the api.endpoints.someEndpoint.matchFulfilled matcher and listen for that in the slice.

[dhlavaty]

note that we have docs on typing createAsyncThunk here

The documentation is very cumbersome, but I managed to type it properly. Thank You.

You could use the api.endpoints.someEndpoint.matchFulfilled matcher and listen for that in the slice.

Not sure I understand what you mean. Can you explain, please?

[markerikson]

Right now you have an extraReducers that is listening for builder.addCase(allBreedsSelectionChanged.fulfilled, someReducer).

You could instead listen for builder.addCase(api.endpoints.getBreeds.matchFulfilled, reducer), with that data coming from an RTK Query getBreeds endpoint.