Utilize ngrx and rxjs to transform an Observable from createSelector (TS2740: Type 'MemoizedSelector error)

Question

Utilize ngrx and rxjs to transform an Observable from createSelector (TS2740: Type 'MemoizedSelector error)

My usual method of fetching data from the ngrx store used to be:

public getUser(): Observable<IUser> {
  return this.store.select(store => store.users.selectedUser);
}

However, I am now attempting to transition to using createSelecor (ngrx 15) and have tried the following:

 public getUser(): Observable<IUser> {
        const user = createSelector((state: IAppState) => state.users,
            (userState) => {
                return userState;
            }
        );
        return user;
    }

This new approach is resulting in an error:

TS2740: Type 'MemoizedSelector<IAppState, IUserState, (s1: IUserState) => IUserState>' is missing the following properties from type 'Observable<IUser>': source, operator, lift, subscribe, and 3 more.

So my question is, how can I obtain an Observable from createSelecor in order to perform the following:

        this.storeSelector.getUser().subscribe((a) => {
            console.log(a);
        });

TypeScript is indicating a problem with the return type as Observable<IUser>.

Thank you.

typescript rxjs ngrx

Answer 1

Answer №1

Your response makes a valid point about the lack of memoization in the example provided. It seems that declaring a new selector each time may be causing this issue.

Considering the simplicity of the getUserMemoize function, it might be more efficient to utilize its body directly instead of calling it separately.

export const getUser = createSelector((state: IAppState) => state.users,
  (userState) => userState.selectedUser
 ));

...
public getUserMemoize(){
  return this.store.select(getUsers);
}

// Or use directly
const users$ = this.store.select(getUsers);

You also mentioned a combination approach in your subsequent explanation:


const getUsers = createSelector((state: IAppState) => state.users, (userState) => userState);
const getConfig = createSelector((state: IAppState) => state.config, (userState) => userState);

const getCombined = createSelector(
  getUsers,
  getConfig,
  (users, config) => ({ users, config}));

const combined$ = this.store.select(getCombined);

It's crucial to avoid recalling createSelector as doing so will create a new instance without retaining the previous state for proper memoization.

Instead of wrapping it in a separate function, it is advisable to directly utilize combined$.

Answer 2

Your response makes a valid point about the lack of memoization in the example provided. It seems that declaring a new selector each time may be causing this issue.

Considering the simplicity of the getUserMemoize function, it might be more efficient to utilize its body directly instead of calling it separately.

export const getUser = createSelector((state: IAppState) => state.users,
  (userState) => userState.selectedUser
 ));

...
public getUserMemoize(){
  return this.store.select(getUsers);
}

// Or use directly
const users$ = this.store.select(getUsers);

You also mentioned a combination approach in your subsequent explanation:


const getUsers = createSelector((state: IAppState) => state.users, (userState) => userState);
const getConfig = createSelector((state: IAppState) => state.config, (userState) => userState);

const getCombined = createSelector(
  getUsers,
  getConfig,
  (users, config) => ({ users, config}));

const combined$ = this.store.select(getCombined);

It's crucial to avoid recalling createSelector as doing so will create a new instance without retaining the previous state for proper memoization.

Instead of wrapping it in a separate function, it is advisable to directly utilize combined$.

Answer 3

Answer №2

Is this the correct approach?

    ...
    private selectorCombined$;
    ...
getUserCombinesExample5(): Observable<{ u: IUser, c: IUIConfigState }> {
        if (!this.selectorCombined$) {
            alert('create instance once selectorCombined$');
            const users = createSelector((state: IAppState) => state.users, (userState) => userState);
            const config = createSelector((state: IAppState) => state.config, (userState) => userState);
            this.selectorCombined$ = createSelector(users, config,
                (i_users1, i_config) => {
                    return {u: i_users1, c: i_config};
                },
            );
        }
        return this.store.select(this.selectorCombined$)
            .pipe(map((v: { u: IUser, c: IUIConfigState }) => {
                    return v;
                })
            );
    }

Any feedback on this code snippet?

Answer 4

Is this the correct approach?

    ...
    private selectorCombined$;
    ...
getUserCombinesExample5(): Observable<{ u: IUser, c: IUIConfigState }> {
        if (!this.selectorCombined$) {
            alert('create instance once selectorCombined$');
            const users = createSelector((state: IAppState) => state.users, (userState) => userState);
            const config = createSelector((state: IAppState) => state.config, (userState) => userState);
            this.selectorCombined$ = createSelector(users, config,
                (i_users1, i_config) => {
                    return {u: i_users1, c: i_config};
                },
            );
        }
        return this.store.select(this.selectorCombined$)
            .pipe(map((v: { u: IUser, c: IUIConfigState }) => {
                    return v;
                })
            );
    }

Any feedback on this code snippet?

Utilize ngrx and rxjs to transform an Observable from createSelector (TS2740: Type 'MemoizedSelector error)

Answer №1

Answer №2

Similar questions

Encountered an issue with ionViewDidLoad: The property 'firstChild' cannot be read as it is null

Is it possible for TypeScript to convert objects while preserving type annotations?

Implementing global user authentication state with Zustand in Next.js version 13.4.9

Tips on configuring a segment in an Angular 6 route

tips on how to export an object with a specified data type

A guide on combining multiple arrays within the filter function of arrays in Typescript

Is it possible to regulate the type of a class that has not yet been instantiated?

Discovering the best method to retrieve user details (email address) following a successful login across all pages or components within Angular

Ways to define a static variable within a function using Typescript

The switch statement and corresponding if-else loop consistently produce incorrect results

Attempting to build a table within a table structure

Tips for integrating tsconfig with webpack's provide plugin

Guide on integrating angular-schema-form into an Ionic 2.0 project using typescript

Typescript: Unfiltering a string array

Guide on how to prevent click events when a checkbox is not selected in Angular 2

Preventing data loss in an Ionic array - encountering issues with using this.array.push

What causes the RxJS pipe not to run in ngOnInit when the Observable is initialized at the class level?

Personalized context hook TypeScript

Tips for triggering the update of index.view when the Save command is triggered within an active dialog

Creating offspring within offspring