Published 03 Nov, 2022

I Created Redux-Api-Struct.

Junya Kono
Category Javascript
Modified : Feb 01, 2023

This article was written by Junya Kono. It covers a lot of details targetting javascript, react, redux, reduxapistruct and various other things. Junya Kono is a tech enthusiast and creative writer and has been writing for a long time now. He has written around 2 posts here and has been a regular contributor to forum discussions. You can browse more details and other various blog posts and articles he has written on his personal website https://konojunya.com.

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

Meet the author

Learn more about the author of the post

Profile Picture
Junya Kono

I talk about technology day in and out, nature lover, gardener and an artist. In my free time I contribute to various projects on github. Find more about me on my website https://konojunya.com