Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Question

Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Seeking guidance on utilizing createEntityAdapter from Redux Toolkit.

In my application, I display package information and details using the master/detail feature of the AG Grid library. Packages are loaded initially, followed by fetching detailed data as each package is expanded.

I intend to manage the data in a normalized way with createEntityAdapter, but struggling with handling dynamic nature of detail grids. Currently, I create a new property in the reducer slice for every set of detail records loaded, using the parent package row's ID as the key. This results in the data slice looking like:

{
  PACKAGES: [{ id: 123, ...otherData }, { id: 124, ...otherData }],
  '123': [{ id: 456, ...otherDetailData }],
}

When user expands the 124 package row, its detail data gets fetched, resulting in:

{
  PACKAGES: [{ id: 123, ...otherData }, { id: 124, ...otherData }],
  '123': [{ id: 456, ...otherDetailData }],
  '124': [{ id: 457, ...otherDetailData }],
}

Although I could separate the PACKAGES data into its own entity adapter, doing the same for detail grids isn't feasible due to unknown details upfront.

Encountering a similar issue as mentioned in this thread.

Considering consolidating all detail data in a single entity adapter and maintaining another index based on parent id, but concerned about keeping it synchronized.

Any suggestions? What approach would be advisable in such case?

javascript reactjs redux redux-toolkit

Answer 1

Answer №1

Redux Toolkit is a project that I developed and continue to maintain. Recently, I had a task that was somewhat similar involving nested entity adapters.

In my specific scenario, I had to ensure that additional data sets were managed as new parent items were added or removed.

interface ChildrenEntry {
  parentId: ParentId;
  children: EntityState<ChildType>
}

interface ChildrenData {
  parentId: ParentId;
  children: ChildType[];
}

interface NewChildAdded {
  parentId: ParentId;
  child: ChildType;
}

export const childEntriesAdapter = createEntityAdapter<ChildrenEntry>();
export const childrenAdapter = createEntityAdapter<ChildType>();

const initialState = childEntriesAdapter.getInitialState();

const createNewChildEntry = (parentId: ParentId) => ({
  parentId,
  children: childrenAdapter.getInitialState()
});

const childEntriesSlice = createSlice({
  name: "children",
  initialState,
  reducers: {
    childEntriesLoaded(state, action: PayloadAction<ChildrenData>) {
      const {parentId, children} = action.payload;
      const childEntry = state.entities[parentId];
      if (childEntry) {
        childrenAdapter.setAll(childEntry.children, children);
      }
    },
    // etc
  },
  extraReducers: builder => {
    builder
      .addCase(parentLoaded, (state, action) => {
        const childEntries = action.payload.map(parent => createNewChildEntry(parent.id));
        childEntriesAdapter.setAll(state, childEntries);
      })
      .addCase(parentDeleted, (state, action) => {
        childEntriesAdapter.removeOne(state, action);
      })
      .addCase(parentAdded, (state, action) => {
        const childEntry = createNewChildEntry(action.payload.id);
        childEntriesAdapter.addOne(state, childEntry);
      });
  }
})

There may be alternative approaches to handling this situation, but the method I used served its purpose effectively for me.

Answer 2

Redux Toolkit is a project that I developed and continue to maintain. Recently, I had a task that was somewhat similar involving nested entity adapters.

In my specific scenario, I had to ensure that additional data sets were managed as new parent items were added or removed.

interface ChildrenEntry {
  parentId: ParentId;
  children: EntityState<ChildType>
}

interface ChildrenData {
  parentId: ParentId;
  children: ChildType[];
}

interface NewChildAdded {
  parentId: ParentId;
  child: ChildType;
}

export const childEntriesAdapter = createEntityAdapter<ChildrenEntry>();
export const childrenAdapter = createEntityAdapter<ChildType>();

const initialState = childEntriesAdapter.getInitialState();

const createNewChildEntry = (parentId: ParentId) => ({
  parentId,
  children: childrenAdapter.getInitialState()
});

const childEntriesSlice = createSlice({
  name: "children",
  initialState,
  reducers: {
    childEntriesLoaded(state, action: PayloadAction<ChildrenData>) {
      const {parentId, children} = action.payload;
      const childEntry = state.entities[parentId];
      if (childEntry) {
        childrenAdapter.setAll(childEntry.children, children);
      }
    },
    // etc
  },
  extraReducers: builder => {
    builder
      .addCase(parentLoaded, (state, action) => {
        const childEntries = action.payload.map(parent => createNewChildEntry(parent.id));
        childEntriesAdapter.setAll(state, childEntries);
      })
      .addCase(parentDeleted, (state, action) => {
        childEntriesAdapter.removeOne(state, action);
      })
      .addCase(parentAdded, (state, action) => {
        const childEntry = createNewChildEntry(action.payload.id);
        childEntriesAdapter.addOne(state, childEntry);
      });
  }
})

There may be alternative approaches to handling this situation, but the method I used served its purpose effectively for me.

Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Answer №1

Similar questions

Extract the body.req object within a loop in a Node.js application

Alter the arrow to dynamically point towards the location of the click source

Issue with React state not updating as per expectation, values in body are not being identified by backend system

Retrieve information from various MongoDB collections

Having trouble getting the new React app to run with the yarn start command - it just doesn't

Revamping the values attribute of a table embedded in a JSP page post an AJAX invocation

The use of the .reset() function in typescript to clear form data may lead to unexpected

When the input is altered, retrieve all input values within the div and then proceed to update the corresponding

What is the best way to change the default text color for a selected tab in mui/material/Tab component in React?

subscribing to multiple observables, such as an observable being nested within another observable related to HTTP requests

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

Transforming a single object into multiple arrays using AngularJS

How to convert typescript path aliases into relative paths for NPM deployment?

Stop all file uploads using jQuery

The connections of directives

Setting up WebPack for TypeScript with import functionality

Show items in the sequence of clicking

What is the best way to deselect radio buttons in one section when choosing a radio button in a different section?

Tips for removing markers from personal Google Maps

I am unable to load any HTML files in my VueJS iframe, except for the index.html located in the public