CODEWITHSUNDEEP
react-reduxredux-toolkit
Fer Toasted
Fer Toasted

Reputation: 1738

createSelector returns a function and not the selected state

I'm try to use createSelector from @redux/toolkit to memoize a calcullation for the some items in the state but I'm not getting any data -not even undefined or empty array- as an output.

Inside my component

// import { createSelector } from '@reduxjs/toolkit';

  const stateInstitutions = (state) => state.institutions.items;
  const ins = useSelector(stateInstitutions);
  const institutionsOptions = createSelector(
    stateInstitutions,
    // this is what I want to do
    // (institutions) => institutions.map(({ name }) => ({ label: name, value: name })), 
    (institutions) => institutions, // just for testing
  );
  console.log(ins, institutionsOptions);

The log output is

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] ƒ memoized() {
    var value = cache.get(arguments);

    if (value === NOT_FOUND) {
      // @ts-ignore
      value = func.apply(null, arguments);

      if (resultEqualityCheck) {
        var entries…

As you can see I'm pointing to the right selector since I get the data from useSelector but not with createSelector.

Some silly error I must be doing but I'm not sure what it is.

Upvotes: 1

Views: 2795

Answers (1)

Chad S.
Chad S.

Reputation: 6633

The issue is that createSelector returns a selector. You still need to pass the selector your state.

e.g.

const stateInstitutions = (state) => state.institutions.items;
const ins = useSelector(stateInstitutions);
const institutionOptionSelector = createSelector(
    stateInstitutions,
    (institutions) => institutions.map(({ name }) => ({ label: name, value: name })), 
  );
const instOptions = useSelector(institutionOptionSelector);
console.log(ins, institutionsOptions);

Upvotes: 1

Related Questions