How can I prevent a duplicate on Redux when using the spread operator?

Question

I am doing this:

    case LOAD_PAGES:
      return {
        ...state,
        pages: [...state.pages, action.pages],
      };

And I have a component that every time I enter to it, it send the same data to the store so I am getting lots of duplicate data.

The pages array looks like this:

pages: [
      {
        key: 0,
        menuName: 'Home',
        pageType: 'HomePage',
        dataIndex: 'HomePage0'
      },
      {
        key: 1,
        menuName: 'Employer Chat',
        pageType: 'EmployerChat',
        dataIndex: 'EmployerChat1'
      },
]

This is the React component:

  const handlePageLoad = () => {
    if (siteById.data) {
      siteById.data.pages.map((p, index) => {
        return loadPagesAction({
          key: index,
          menuName: p.menuName,
          pageType: p.pageType,
          dataIndex: p.pageType + index,
        });
      });
    }
  };

  useEffect(() => {
    if (siteById.data.pages.length) {
      handlePageLoad();
    }
  }, []);

Any ideas?

Why do you dispatch `loadPagesAction` for all pages? What is your purpose — Shubham Khatri, May 18 '20 at 09:18
@ShubhamKhatri I have to render a menu list based on those pages. — Non, May 18 '20 at 09:19
So If I understand correct, each component is a page, and when the page loads, who wish to update the state in redux so that you change the menu? — Shubham Khatri, May 18 '20 at 09:23
seems like you are returning state.pages twice: `(1st)...state, pages: [(2nd)...state.pages` — limido, May 18 '20 at 09:26

TheMisir · Answer 1 · 2020-05-18T10:00:59.733

Here's "smart" way to filter duplicates.

function filterDuplicates(array, areEqual) {
  return array.filter((item, pos) => {
    return array.findIndex((other) => areEqual(item, other)) == pos;
  });
}

console.log(
  filterDuplicates([
    { key: 1, name: 'test' },
    { key: 2, name: 'apple' },
    { key: 1, name: 'test' },
  ], (a, b) => a.key == b.key)
);

Pass array to first argument and equality comparer to second argument of filterDuplicates. I got this idea from that answer.

TypeScript

function filterDuplicates<T>(array: T[], areEqual: ((a: T, b: T) => boolean)): T[] {
  return array.filter((item: T, pos: number) => {
    return array.findIndex((other: T) => areEqual(item, other)) == pos;
  });
}

Vivek Doshi · Accepted Answer · 2020-05-18T09:24:15.610

2

You can do something like this :

Check if there is an existing page in your state or not, if return same or else push

case LOAD_PAGES:
        return {
            ...state,
            pages: state.pages.findIndex(page => page.key === action.pages.key) >= 0 ?
                    state.pages :
                    [...state.pages, action.pages]
        };

edited May 18 '20 at 09:24

answered May 18 '20 at 09:18

Vivek Doshi

56,649
12
110
122

1

Instead of using `findIndex` you could use the built-in array function `some`. – Nikita Malyschkin May 18 '20 at 09:22
@NikitaMalyschkin, The findIndex() method returns the index of the first element in the array that satisfies the provided testing function, so there is no extra looping, we can keep it as it is – Vivek Doshi May 18 '20 at 09:25
@VivelDoshi, so does the `some()` method. `findIndex` is not wrong in any way, but `some` is just the proper tool for the job. – Nikita Malyschkin May 18 '20 at 09:34
@NikitaMalyschkin, yes you can say that. – Vivek Doshi May 18 '20 at 09:35

score 1 · Answer 3 · answered May 18 '20 at 09:18

There are many ways to solve your problem and here is how I would approach it:

Instead of using an array, store your pages in an object and use the already defined keys as keys for the object. You can use Object.values(store.pages) or Object.entries(store.pages) to get an array of the pages the way you did before.

score 1 · Answer 4 · answered Apr 28 '21 at 09:18

1

Simply using set, the duplicated element can be omitted.

return { ...state, arr: Array.from(new Set([...state.arr, ...newArr]))};

answered Apr 28 '21 at 09:18

Milos Rad

49
1
3

How can I prevent a duplicate on Redux when using the spread operator?

4 Answers4

TypeScript