Reduce Redux's action-creator boilerplates without library support in TypeScript

Ryoji Ishii — Mon, 15 Apr 2019 23:40:08 +0000

// Define action-creators
export const fetchPostsRequest = () => ({
  type: "FETCH_POSTS" as const
});
export const fetchPostsSuccess = (posts: any) => ({
  type: "FETCH_POSTS_SUCCESS" as const,
  payload: { posts }
});
export const fetchPostsFailure = (error: Error) => ({
  type: "FETCH_POSTS_FAILURE" as const,
  error
});

// Define Action and ActionTypes
export type FetchPostAction = ReturnType<
  | typeof fetchPostsRequest
  | typeof fetchPostsSuccess
  | typeof fetchPostsFailure
>
export type FetchPostsActionTypes = FetchPostAction["type"];

// Let's use
const action: FetchPostAction = {
  type: "FETCH_POSTS_FAILURE"
}; // -> Property 'error' is missing

DEV Community: Ryoji Ishii

Reduce Redux's action-creator boilerplates without library support in TypeScript