Redux Toolkit · RTK Query · all subjects

cache-management/selectors

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

selectCachedArgsForQuery signature and parameters

selectCachedArgsForQuery is a selector function with signature: function selectCachedArgsForQuery(state: RootState, queryName: QueryName): Array<QueryArg>. Parameters are: state (the root state), queryName (a string matching an existing query endpoint name).

selectCachedArgsForQuery return value

selectCachedArgsForQuery returns an array that contains arguments used for each entry.

selectCachedArgsForQuery example

Example: const args = api.util.selectCachedArgsForQuery(state, 'getPosts')

selectInvalidatedBy function signature

selectInvalidatedBy takes state (FullState) and tags (array of TagTypes or FullTagDescription<TagTypes>) and returns an array of objects with endpointName, originalArgs, and queryCacheKey properties.

selectCachedArgsForQuery function signature

selectCachedArgsForQuery takes state (FullState) and endpointName (EndpointName) and returns an array of QueryArg.

Manually selecting endpoint error with selector

You can access an endpoint's error using the selector pattern: useSelector(api.endpoints.getPosts.select()). This returns an object with an error property that contains error.status and error.data.

Access cached data with endpoint.select()

Accessing cache data and request status can be performed using the select function property of a query endpoint. Call endpoint.select(arg) with the Redux state to get a snapshot of cache data and request status. Example: const result = api.endpoints.getPosts.select()(state); const { data, isSuccess, isError, error } = result;

endpoint.select() returns new selector instance each call

The endpoint.select(arg) function creates a new selector instance each time it is called—it is not the actual selector function itself. The instance itself is memoized.

No isFetching flag in non-hook select results

When using endpoint.select() without React hooks, there is no isFetching flag returned. The isLoading flag will be true if the status is pending, regardless of whether there is already data.

Memoize selector creation with createSelector

Because endpoint.select(arg) returns a new selector each time it is called, it can be desirable to memoize the creation of a selector using createSelector. This creates a memoized instance that can be used in other selectors. Example: const createGetPostSelector = createSelector((id: string) => id, (id) => api.endpoints.getPost.select(id)); const selectGetPostError = createSelector((state: RootState) => state, (state: RootState, id: string) => createGetPostSelector(id), (state, selectGetPost) => selectGetPost(state).error);

Give your agent this brain