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

github logo ・1 min read

// 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
twitter logo DISCUSS
Classic DEV Post from May 4 '18

What I'd like to hear from an experienced developer when I was a beginner

We have to make a lot of personal and professional decisions during life. In this post, I will help students to make them.

Ryoji Ishii profile image
JavaScript / TypeScript / Scala / Python / Rust

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️

(There is also a pink mode)