如何在TypeScript中使用redux app中的选择器?

时间:2017-02-16 20:15:01

标签: typescript redux reselect

我尝试在我的Redux应用程序中使用重新选择库中的selectors

我的选择器文件看起来:

import { createSelector } from 'reselect'

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

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

然后我尝试在我的组件中使用,如下所示:

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

当我尝试编译所有这些时,我收到了这个错误:

enter image description here

我猜测我如何为道具声明类型,目前看起来像这样:

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

请帮我解决此问题。提前谢谢。

2 个答案:

答案 0 :(得分:4)

具有更多类型的示例:

  1. 描述类型
type TPostData = {
  type: string;
};

type TPostsState = TPostData[];

type TState = {
  posts: TPostsState;
};
  1. 创建选择器
// 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'),
  );

结果:您收到的所有帖子的类型参数都为'new'。

答案 1 :(得分:1)

TypeScript不期望第一个参数的数组。只需将您的选择器函数作为参数传递给createSelector,如

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