Need help with selector memoization

[stasa-87]

I have query that fetches data from the server based on the current page. When a load more button is clicked the page param is increased and a new query is send to the server. Something like that

page:1 -> getActivities({"start":0})
page:2 -> getActivities({"start":10})
page:3 -> getActivities({"start":20})
page:4 -> getActivities({"start":30})

I have to show all pages the user loaded no matter how many they are not only the current, previous and next page but all of them.

I tried to create selector that combines all results but it doesn't memoize well and it runs on every state change

export const selectActivitiesResult = createSelector(
	(args: GetActivitiesRequest) => args,
	(args) => extendedApi.endpoints.getActivities.select(args)
)

export const selectActivitiesData = createSelector(
	(state: RootState) => state,
	(state: RootState, args: GetActivitiesRequest) => selectActivitiesResult(args),
	(state, selectActivitiesResult) => selectActivitiesResult(state)?.data ?? initialState
)

export const selectCombinedActivities = createSelector(
	(state: RootState) => state,
	(state: RootState, args: GetActivitiesRequest) => args,
	(state, args) => {

		const {start: total} = args;
		const perPage = 10;

		return [...range(0, total, perPage)]
			.flatMap(start => localizedActivitiesSelectors.selectAll(selectActivitiesData(state, {...args, start})))
	}
)

export const makeSelectCombinedActivities = () => selectCombinedActivities

and this is how i call it

const selectCombinedData = useMemo(makeSelectCombinedData, [])
const data= useAppSelector(state => selectCombinedData(state, args))

I added this so i can at least run side effects only after change in the data array but still the selector recalcutes and the component is rerender on each change in the store

const dataMemo = useMemo(() => data, [args]);
useEffect(() => {
  console.log('data changed!', dataMemo )
}, [dataMemo ])

[markerikson]

Yeah, you should never write a selector that passes the entire state on to the output function. That will cause the memoization to never work. Instead, you should extract just the pieces you need to work with, and then use those in the output function.

[stasa-87]

Yes i know but that is not possible because the pages are dynamic
[...range(0, total, perPage)].map(start =>selectActivitiesData(state, {...args, start}))

how to dynamically add these as input selectors so i can remove the (state: RootState) => state,

[stasa-87]

Couldn't find a way to create a selector that combine all entrypoint data based on a page parameter

export const selectCombinedActivities = createSelector(
	(state: RootState, args: GetActivitiesRequest) => selectActivitiesData(state, {...args, start: 0}),
        (state: RootState, args: GetActivitiesRequest) => selectActivitiesData(state, {...args, start: 10}),
        (state: RootState, args: GetActivitiesRequest) => selectActivitiesData(state, {...args, start: 20}),
	(pageOne, pageTwo, pageThree) => {

                return [pageOne, pageTwo, pageThree].flatMap(data=> localizedActivitiesSelectors.selectAll(data))
	}
) 

something like that but dynamic ist it possible?

[stasa-87]

One of the most productive discussion i have ever had! Hundreds of millions solutions came out of it.

Still can't find a solution that combines all results for an endpoint based on parameter and that memoizes the results as expected.
I start thinking that it should be implemented at a lower level inside the rtk itself.
Maybe a skip parameter inside the select function that ignores arguments and returns all results for an ednpoint
extendedApi.endpoints.getActivities.select(args, **skip**) // ignore args and return everythig from getActivities

P.S. the merge option is one possible solution because it will remove the need to merge ednpoints but that requires a lot of changes in the code and may rise other problems related to merge option itself