CODEWITHSUNDEEP
reactjsreact-nativereact-reduxredux-toolkitredux-thunk
Harsh Kukarwadiya
Harsh Kukarwadiya

Reputation: 508

How we can combine the selector in Redux?

Suppose that I want 3 data from 3 different reducers.

In general I can do something like this!!

const data1 = useSelector((state: any) => state?.reducer1);
const data2 = useSelector((state: any) => state?.reducer2);
const data3 = useSelector((state: any) => state?.reducer3);

So how can I achieve the same result with single useSelector

Upvotes: 0

Views: 493

Answers (3)

Harsh Kukarwadiya
Harsh Kukarwadiya

Reputation: 508

I am answering my question here.

import {createSelector} from 'reselect';    

   const combinedSelector = createSelector(
     (state: any) => state?.reducer1,
     (state: any) => state?.reducer2,
     (state: any) => state?.reducer3,
     (state: any) => state.reducer4,
      (reducer1, reducer2, reducer3, reducer4) => ({
        data1: reducer1?.data1,
        data2: reducer2?.data2,
        data3: reducer3?.data3,
        data4: reducer4?.data4,
      }),
    );

 const {data1, data2} = useSelector(combinedSelector);

Upvotes: 1

Ilê Caian
Ilê Caian

Reputation: 645

You can use the deconstruction assignment for your state such as:

const { reducer1, reducer2, reducer3 } = useSelector((state: any) =>
  ({
    reducer1: state?.reducer1,
    reducer2: state?.reducer2,
    reducer3: state?.reducer3
  }));

Upvotes: 0

Elio Rahi
Elio Rahi

Reputation: 164

const dataState = useSelector((state: any) => ({reducer1: state?.reducer1, reducer2: state?.reducer2, reducer3: state?.reducer3}));

const data1 = dataState.reducer1;
const data2 = dataState.reducer2;
const data3 = dataState.reducer3;

Upvotes: 1

Related Questions