Redux-toolkit: [Redux-toolkit] [createEntityAdapter] Cannot read property 'ids' of undefined

[daminhtung]

Hi, I got an error when running the test. Any help or suggestions for me?

• redux-mock-store: ^1.5.4
• "@types/redux-mock-store": "^1.0.2",
• "@reduxjs/toolkit": "^1.3.5",
• "@testing-library/react-native": "^5.0.3",

Error when run testing

TypeError: Cannot read property 'ids' of undefined

  47 |   const items = useSelector((state: MyState) => {
> 48 |     return myEntityAdapter.getSelectors().selectAll(state.mystate)
        |                                         ^
  49 |   })
  50 |

My test:

const { queryByTestId } = render(
      <Provider store={store}>
        <MenuProvider skipInstanceCheck={true}>
          <MyComponent />
        </MenuProvider>
      </Provider>
    )

mySlice.ts

...
export const myEntityAdapter = createEntityAdapter<Item>()
...

[markerikson]

Does state.mystate actually exist at that point in time?

Note that you shouldn't generally be calling getSelectors() in app code like that. Instead, you should be calling it once in the slice file and exporting them. You also probably should be generating "globalized" selectors by passing in a selector that accepts the root state and returns this specific slice, like export const {selectAll : selectAllItems} = itemsAdapter.getSelectors(state => state.items):

https://redux-toolkit.js.org/api/createEntityAdapter#selector-functions

[tylercaceres]

Does state.mystate actually exist at that point in time?

Note that you shouldn't generally be calling getSelectors() in app code like that. Instead, you should be calling it once in the slice file and exporting them. You also probably should be generating "globalized" selectors by passing in a selector that accepts the root state and returns this specific slice, like export const {selectAll : selectAllItems} = itemsAdapter.getSelectors(state => state.items):

https://redux-toolkit.js.org/api/createEntityAdapter#selector-functions

Hello @markerikson ,
I've exported directly from the slice file as:

fakeSlice.js

export const {
  selectIds: selectChatIds,
  selectEntities: selectChatEntities,
  selectAll: selectAllChats,
  selectTotal: selectTotalChats,
  selectById: selectChatById
} = omnichannelAdapter.getSelectors(state => state.omnichannel);

However, i have another file - that contains my selectors. Trying to include these above selectors into the selectors.js file, it fails the jest tests as well.

selectors.js
`import {
  selectChatIds,
  selectChatEntities,
  selectAllChats,
  selectTotalChats,
  selectChatById
} from './fakeSlice';

export {
  selectChatIds,
  selectChatEntities,
  selectAllChats,
  selectTotalChats,
  selectChatById
};`

Might you know why? I exported the selectors as you mentioned above.

[markerikson]

Afraid I'd need to see an example that reproduces this issue to really have any suggestions here, sorry.

[ifamakes]

Hi! I just saw this in the closed issues. I'm also having this issue.

I export the selectors in the slice file:

and I call the selector in my component:

but this happens on compile!

and if I check the redux state...

It does indeed exist!

using the useSelector hook from React-Redux manually works and finds the state as existing, but I can't seem to get this to work even if I define the state for the selectors in my component, it just can't seem to find them.

[markerikson]

@poww10s yeah, that's happening because you're actually calling selectAll() without passing in an actual Redux state value :)

const timbre = timbreSelectors.selectAll()

the point of a Redux selector is that you have to pass in the entire Redux state value as the argument. (Technically it's possible to reorder the arguments, but in practice they always get written and used as selectSomething(state, otherArg1, otherArg2).

In a component, you don't have access to the actual state value, so you're supposed to pass that to useSelector, which then grabs the store instance from context and calls yourSelector(store.getState()).

[daminhtung]

Just set init state like this, i resolved my problem.
Thanks all.

 const initialState = myAdapter.getInitialState({
      entities: { ... },
      error: null,
    })

[ifamakes]

so what am I doing wrong here?

it also happens it if I do this:

I feel like I may be missing something here, but copying the examples from the API doesn't seem to help.

[markerikson]

Effectively all selectors, including selectAll, must have the Redux state value passed in as the first argument.

So, selectAll() here is passing undefined as the first argument. That is _not_ the Redux state :)

The correct usage would be selectAll(state), but like I said - in a component, you don't have access to the state object in the component to begin with. That's the whole point of useSelector.

You might want to read through https://redux.js.org/tutorials/fundamentals/part-5-ui-react and https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/ to get a better understanding of what React-Redux actually does for you, and https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/ to understand how to use selectors correctly.

[ifamakes]

I am also setting my initialState like that @daminhtung

doing this works:

but I would rather not have to reinvent the wheel further down the line when I'm trying to grab a lot of values

[markerikson]

The right usage here would be either:

// pass the selector here - don't call it yourself!
const timbreItems = useSelector(timbreSelectors.selectAll);

or:

const oneSpecificItem = useSelector(state => timbreSelectors.selectById(state, "someId"));

but calling timbreSelectors.selectAll(), by itself, is wrong - because you haven't passed in a state value.

[ifamakes]

@markerikson oh I see my mistake now.
thank you!

[daminhtung]

@poww10s
@markerikson said right.
And my case just uses in testing with jest.