Search code examples
reactjsrtk-querycreateentityadapter

Is there any need to use normalised state with createEntityAdapter while using RTK Query?


I recently started using RTK Query and I've seen on the advanced patterns of the documentation they talked a lot about state normalisation by using createEntityAdapter and using that kind of a normalised state {ids: [1,2,3], entities: {1: {..}, 2: {..}}} and I want to know is there any added value if I start using these adapters with my RTK Query endpoints and hooks.

If possible it will be great if anyone can provide some articles or tutorials that touches on this point, all I need is to see if combining both has some value or if it's not worth the effort.


Solution

  • createEntityAdapter normalizes the state and the value is the same as with redux in general, it minimizes dependancy on redux state.

    A short simplified example With a normalized state any item in a list of entities will only depend on the ID in the entitie array. Then within the item component GET the entitie object from state. Now if some entitie changes in state, only the item with that id will rerender. Not the entire list of items.

    So it is a performance optimisation, mostly needed for large lists of data. But will definetly have a positive impact on performance anywhere.

    There were some great recourses on normalising state before redux toolkit such as https://egghead.io/lessons/javascript-redux-normalizing-the-state-shape

    https://redux.js.org/usage/structuring-reducers/normalizing-state-shape

    The library mostly used for this before rtk came along is normalizer anything you read on that should be mirrored in its redux toolkit counterpart createEntityAdapter