Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
zustand-fetching
Advanced tools
zustand-fetching - npm Package Compare versions
Comparing version 1.0.3-beta to 1.0.4-beta
| { | ||
| "name": "zustand-fetching", | ||
| "version": "1.0.3-beta", | ||
| "version": "1.0.4-beta", | ||
| "private": false, | ||
@@ -5,0 +5,0 @@ "description": "Zustand fetching helpers", |
@@ -7,3 +7,3 @@ # Zustand Fetching Helpers | ||
| > What is this library for? We always have standard requests to the backend, so we offer several methods to simplify the | ||
| > work with requests using **zustand** | ||
| > work with requests using **zustand**. All examples are made using _TypeScript_ | ||
@@ -16,3 +16,3 @@ Problem: All asynchronous requests are actually very similar, but we are constantly faced with our own | ||
| Here's what the simplest queries might look like. All examples are made using TypeScript | ||
| Here's what the simplest queries might look like. | ||
@@ -33,6 +33,4 @@ ```ts | ||
| automatically create all the necessary environment for working according to our description. For example, a request for | ||
| information about a user. | ||
| information about a user. Describe our store. | ||
| Describe our store. | ||
| ```ts | ||
@@ -56,8 +54,8 @@ interface IUserState { | ||
| _**action**_ - function to call our request.<br> | ||
| _**atom**_ - request store. _ContentLoading_ indicates that this is loading data<br> | ||
| _**clear**_ - function to clear the _atom_ field.<br> | ||
| _**abort**_ - function to abort the request. Useful in case we leave the page where the request was called before the | ||
| end of the request.<br> | ||
| _**setAtom**_ - set content field in our _atom_. You can use _setAtom_ in the same way like _zustand_ _set_. | ||
| - _**action**_ - function to call our request.<br> | ||
| - _**atom**_ - request store. _ContentLoading_ indicates that this is loading data<br> | ||
| - _**clear**_ - function to clear the _atom_ field.<br> | ||
| - _**abort**_ - function to abort the request. Useful in case we leave the page where the request was called before the | ||
| end of the request.<br> | ||
| - _**setAtom**_ - set content field in our _atom_. You can use _setAtom_ in the same way like _zustand_ _set_. | ||
@@ -80,8 +78,8 @@ The _atom_ field from **_ICreateRequest_** is the _**ContentLoading**_ interface. | ||
| _**content**_ - the data returned by request. _null_ - when we haven't received anything yet<br> | ||
| _**status**_ - the status of our request. Possible values: "init", "loading", "loaded", "waiting", "progress", " | ||
| error"<br> | ||
| _**payload**_ - our payload with which we called the request<br> | ||
| _**error**_ - the error returned by the request<br> | ||
| _**lastFetchTime**_ - Date of last fulfilled request<br> | ||
| - _**content**_ - the data returned by request. _null_ - when we haven't received anything yet<br> | ||
| - _**status**_ - the status of our request. Possible values: "init", "loading", "loaded", "waiting", "progress", " | ||
| error"<br> | ||
| - _**payload**_ - our request's payload<br> | ||
| - _**error**_ - the error returned by the request<br> | ||
| - _**lastFetchTime**_ - Date of last fulfilled request<br> | ||
@@ -101,17 +99,5 @@ Congratulations, we have reviewed the interface of our _**createSlice**_. | ||
| Thus, we created a request for get user data. **getUserById** is your data request, which should return the type _ | ||
| IUser_. This also means that you can add any data processing to your request, use your own _baseFetch_ handlers or | ||
| some solutions. The main thing is that the returned result must match the type you declared | ||
| in ```userRequest: ICreateRequest<string, IUser>```.<br> | ||
| For example, let's process the result of a query | ||
| Thus, we created a request for get user data. **getUserById** is your data request, which should return the type _IUser_ | ||
| . | ||
| ```ts | ||
| export const useUser = create<IUserState>((set, get) => ({ | ||
| ...createSlice(set, get, "userRequest", async (id: string) => { | ||
| const result = await getUserById(id); | ||
| return { ...result.data, role: "artist" } | ||
| }), | ||
| })) | ||
| ``` | ||
| **That's all.** 3 lines to describe our request. What can we do with it now? let's see. We used a small _StatusSwitcher_ | ||
@@ -159,2 +145,15 @@ component to keep the example component code cleaner. | ||
| You also can add any data processing to your request, use your own _baseFetch_ handlers or some solutions. The main | ||
| thing is that the returned result must match the type you declared in ```userRequest: ICreateRequest<string, IUser>``` | ||
| . For example, let's process the result of a query | ||
| ```ts | ||
| export const useUser = create<IUserState>((set, get) => ({ | ||
| ...createSlice(set, get, "userRequest", async (id: string) => { | ||
| const result = await getUserById(id); | ||
| return { ...result.data, role: "artist" } | ||
| }), | ||
| })) | ||
| ``` | ||
| But that's not all, _**createSlice**_ has much more powerful functionality. Here is an advanced description of the | ||
@@ -197,7 +196,5 @@ parameters of ```createSlice(set, get, name, payloadCreator, extra)``` | ||
| All fields can be conditionally divided into 3 groups: fields of an atom, reactions and a reducer. | ||
| - _**initialStatus**_ - the status that can be defined for our request by default. Default value is **" | ||
| loading"**, but you can define some of LoadingStatus. Indeed, a lot depends on the status in our interface and we do | ||
| not | ||
| always need **loading**. | ||
| not always need **loading**. | ||
| - _**initialContent**_ - content of the _atom_ field. The default is defined as _null_ until a value is returned from | ||
@@ -218,7 +215,7 @@ the request. | ||
| - fulfilledReaction - called when request was successful <br> | ||
| - rejectedReaction - called when request was rejected <br> | ||
| - resolvedReaction - called after the request is executed, regardless of the result <br> | ||
| - actionReaction - called before the start of the request <br> | ||
| - abortReaction - called when request was aborted <br> | ||
| - **_fulfilledReaction_** - called when request was successful <br> | ||
| - **_rejectedReaction_** - called when request was rejected <br> | ||
| - **_resolvedReaction_** - called after the request is executed, regardless of the result <br> | ||
| - **_actionReaction_** - called before the start of the request <br> | ||
| - **_abortReaction_** - called when request was aborted <br> | ||
@@ -225,0 +222,0 @@ ```ts |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.02%
61842
Worsened metrics
- Number of lines in readme file
- decreased by-0.69%
429
No dependency changes