hvordan bruke selektorer i en Redux-app med TypeScript?


Jeg prøver å bruke selectors fra reselect-biblioteket i min Redux-app.

min selektorfiler ser slik ut:

import { createSelector } from 'reselect'

const postsSelectors = state => state.global.posts.allPostse;

export const getPosts = createSelector(
  [ postsSelectors ],
  (posts) => posts
);

og så prøver jeg å bruke det i komponenten min, slik:

const mapStateToProps = (state) => ({
  posts: getPosts(state),
});

Når jeg prøver å kompilere alt dette, får jeg denne feilen:

Jeg gjetter at med hvordan jeg erklærer typer for props, som for øyeblikket ser slik ut:

interface Props{
 posts(state: any): any
 loadStories(): void;
};

Hjelp meg med å løse dette problemet. Takk på forhånd.

Svar #1

Et eksempel med flere typer:

  1. Beskriv typer
type TPostData = {
  type: string;
};

type TPostsState = TPostData[];

type TState = {
  posts: TPostsState;
};
  1. Opprett velgere
// get all posts
export const selectPosts = (state: TState): TPostsState => state.posts;

// get new posts
export const selectNewPosts = createSelector<
  TState,
  TPostsState,
  TPostData[]>(
    selectPosts,
    (posts) => posts.filter(({ type }) => type === 'new'),
  );

Resultat: Du har fått alle innlegg med typeparameter 'new'.

Svar #2

TypeScript forventer ikke et array for det første argumentet. Bare send inn dine selektorfunksjoner som argumenter til createSelector, som i

export const getPosts = createSelector(
  postsSelectors,
  (posts) => posts
);

Relaterte artikler