single_request

Before introducing this package, I would like to briefly explain my motivation and application scenarios for developing this package

Let's first take a look at the traditional React request data scenario

This is a pure display list, and everything is normal when requesting data rendering through Axios When we need him in multiple places, like this

A duplicate network request has occurred

So our first requirement arises to share data from the same request

But let's not rush to solve it for now and continue watching more scenes

Let's add some content Add an age increasing feature to each sub project And add a function to save and modify this list component So we now have this requirement When increasing age, the data is the same. We hope that the data for each list item is synchronized But this data is stored in a local state, and we do not want to frequently initiate network requests to change the data. Instead, local records are stored on the server when saved

Let's take a look at the current actual situation first

Unfortunately, the status of the components is separate, so there is no synchronization locally

To solve this problem, we may need to perform state improvement or use useContext

But we didn't want to do this, so I tried writing a hook to solve this problem

useSingleRequest

Let's try using the brand new hooks

The network request is intuitive, only one remains

Synchronous change of local state

Overwrite local state with new request

Through these demonstrations, I believe you will have some doubts, such as how state management is carried out. I have combined this with Facebook's experimental state management library, Recoil, so if you want to use it, you need to import and encapsulate the components of RecoilRoot and root nodes like this

If you are already using Recoil, all you need to do is import the SRProvider like this

Now let's officially learn about the specific usage methods

UseSingleRequest receives three parameters The first parameter is the unique key currently requested to store data for the same key The second parameter is that your request function will be actively called The third parameter is the formatting program you provided, which will format the request after successfully obtaining the result And the final result obtained is data SetData is used to change the local state, just like setState There are several state related Boolean values isLoading isError When a request error occurs, the error will be automatically captured If you want to know specific information, you can receive another errorMessage RunRequest is the request function that you pass in to encapsulate various internal states. When called, the result will be assigned to the data So you noticed that there are two ways to update data One is to update setData locally One is runRequest requesting new data updates

There is also an optional fourth parameter

{ log?: boolean, refreshInterval?: number (ms) }