I created redux-api-struct.

I wrote this article before.

https://qiita.com/konojunya/items/07fd138144cb410da387

This article translated into English what I wrote in Japanese on a site similar to dev.to, Qiita Japan.
Because I'm Japanese and I'm not good at English, I translated it using a translation machine, but please tell me if there is a mistake in English.

I published a library called redux-api-struct.
This is a library in which you can write more concise and more type-safe logic for React and asynchronous applications managed by redux.

The API is described in the README, but here's a quick way to use it.

The characters are React, Redux, and Promise.
Take the example of a common technique for a Web application that usually accesses resources to the API.

For example, you are making a blog service. There is a detailed screen of the article. The API uses GET method to access /articles/:id.
Let's say that the value is managed by the state article. article the details are assumed to be the following structure.

interface Article {
  title: string;
  body: string;
}

If the api is accessed and statusCode is 200, article will look like this:

{
  article: {
    title: "hoge title",
    body: "hoge body"
  }
}

Now consider a component that display this.
The following functional component is defined:

import * as React from "react";

interface Props {
  article: Article;
}

export const ArticleTemplate: React.FunctionComponent<Props> = ({ article }) => (
  <>
    <h1>{article.title}</h1>
    <p>{article.body}</p>
  </>
)

It seems to be good if it passes the article to props.

Let's try to actually move. Then, the error comes out depending on the writing. If the article initialState is null, it will be null.title access and an error occurs. Let's define an empty string instead of putting null.

The page will then be displayed. If an empty string and an empty body are displayed and the api access is success, you can see the article.

But what if there is an error in the api?
For example, if you access the URL of an article that does not exist in the article details, 404 is returned.
You have to render the not found page. It is necessary to know whether the request was successful or not.
That's why we have three articles to fetch, success, and failure. But for example if you want to put out a loading screen other than these, in the current situation, for example, title is an empty string will be implemented such as fetching.
It is redux-api-struct to be able to handle all these easily. :)

Initial the access state to the api initial, fetching, success and failure has managed in four states.

The component only has to switch between the four states. Accessing the actual data is not an error like referencing null unless it is success.

The first thing to do is to bind the state of the reducer with the type ReduxAPIStruct.

import { ReduxAPIStruct, createDefaultStruct } from "redux-api-struct";

interface InitialState {
  article: ReduxAPIStruct<Article>;
}
const initialState: InitialState = {
  article: createDefaultStruct<Article>(null)
}

The type passed to generics of ReduxAPIStruct is the original data type.

The state wrapped by this ReduxAPIStruct has the following tree structure:

interface WrappedArticle {
  state: ReduxAPIState,
  data: Article,
  error: ReduxAPIError
}

The status is managed by the four states described above.

Please read the implementation of the component as it is easier to see the README.

https://github.com/konojunya/redux-api-struct#usage

In this way you can easily create an asynchronous web application while keeping the type safe.

p.s.

If you like it or if you have a bit more consideration, I'd be happy to have a star or issue.

Thanks.

Author: @konojunya