¿Cómo usar selectores en una aplicación de Redux con TypeScript?

Intento usar selectors de la biblioteca reselect en mi aplicación Redux.

mi archivo de selectores se ve así:

import { createSelector } from 'reselect'

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

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

y luego intento usarlo en mi componente, así:

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

Cuando intento compilar todo esto, obtengo este error:

Supongo que con la forma en que declaro los tipos para las props, que actualmente se ve así:

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

Ayúdame por favor a resolver este problema. Gracias de antemano.

Respuesta #1

Un ejemplo con más tipos:

1. Describe tipos

type TPostData = {
  type: string;
};

type TPostsState = TPostData[];

type TState = {
  posts: TPostsState;
};

2. Crear selectores

// 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'),
  );

Resultado: Has obtenido todas las publicaciones con el parámetro de tipo 'nuevo'.

Respuesta #2

TypeScript no espera un arreglo para el primer argumento. Simplemente pasa tus funciones selector como argumentos a createSelector, como en

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