[Question] Organizate the reduce state by normalization

[TheElegantCoding]

in the documentation of redux, the say normalize the state is better than have a nested state

this is an example of one state normalized from documentation of redux

{
  users: {
    ids: ["user1", "user2", "user3"],
    entities: {
      "user1": {id: "user1", firstName, lastName},
      "user2": {id: "user2", firstName, lastName},
      "user3": {id: "user3", firstName, lastName},
    }
  }
}

Your showRrducer can change the state and have a normalized state like this

Before

  initialState = {
    currentShowId: '74',
    show: null,
    episodes: [],
    actors: [],
  };

After

  initialState = {
    currentShowId: '74',
    show: null,
    episodes: 
    {
          episodesId: [],
          entities: []
    },
    actors:
   {
          actorsId: [],
          entities: []
   },
  };

The redux documentation says this is better for search an element in the array on the state like this

const actorId= 'actor1'
const actorObject = state.actors.entities[actorId]

to achieve something like this redux documentation recommend using normalizr i think this can help to this redux architecture to be better.

another personal question that i have is when we call an API that by default have a filter system and pagination and we want to show the most rating shows and the most popular shows, putting your action request show like example we can change like this

  static requestShow(FILTERS) {
    return async (dispatch, getState) => 
   {
      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_SHOW, ShowsEffect.requestShow, FILTERS);
    };
  }

And when we run another time dispatch we pass the arguments like this

 componentDidMount() {
    this.props.dispatch(ShowsAction.requestEpisodes({ page: 1, limit: 5, filter: 'popular' }));
    this.props.dispatch(ShowsAction.requestEpisodes({ page: 1, limit: 5, filter: 'rating' }));
  }

but we have a problem if we want to store the popular and the most rating shows if we call the tow dispatch we rewrite the state and we only have the first action dispatched

I found a solution to make two action functions and then in the reducer when these actions finished store the state in the different arrays, like this:

  static requestRatingShow(FILTERS) {
    return async (dispatch, getState) => 
   {
      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_SHOW, ShowsEffect.requestShow, FILTERS);
    };
  }

  static requestPopularShow(FILTERS) {
    return async (dispatch, getState) => 
   {
      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_SHOW, ShowsEffect.requestShow, FILTERS);
    };
  }

  [ShowsAction.REQUEST_SHOW_POPULAR_FINISHED](state, action) {
    return {
      ...state,
      showPopular: action.payload,
    };
  }

  [ShowsAction.REQUEST_SHOW_RATING_FINISHED](state, action) {
    return {
      ...state,
      showRating: action.payload,
    };
  }

but I think this is not the best way to do this so what other implementation of this can be done ?