zustand-fetching
Advanced tools
Comparing version 1.0.2-beta to 1.0.2
@@ -14,2 +14,5 @@ import { StoreApi } from "zustand"; | ||
} | ||
export declare const createGroupSlice: <Payload, Result, State extends Record<string, any>, K extends keyof State>(set: (partial: State | Partial<State> | ((state: State) => State | Partial<State>), replace?: boolean | undefined) => void, get: () => State, name: K, payloadCreator: (params: IGroupRequestParams<Payload>) => Promise<Result>, extraArgument?: IExtraReaction<IGroupRequestParams<Payload>, Result> | undefined) => Record<K, ICreateGroupRequests<Payload, Result>>; | ||
export declare const createGroupSlice: <Payload, Result, State extends Record<string, any>, K extends keyof State>(set: (partial: State | Partial<State> | ((state: State) => State | Partial<State>), replace?: boolean | undefined) => void, get: () => State, name: K, payloadCreator: (params: { | ||
key: string; | ||
payload: Payload; | ||
}) => Promise<Result>, extraArgument?: IExtraReaction<IGroupRequestParams<Payload>, Result> | undefined) => Record<K, ICreateGroupRequests<Payload, Result>>; |
@@ -97,12 +97,9 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
.catch((error) => { | ||
var _a, _b, _c; | ||
var _a, _b; | ||
if (error.message === "The user aborted a request.") { | ||
(_a = extra === null || extra === void 0 ? void 0 : extra.abortReaction) === null || _a === void 0 ? void 0 : _a.call(extra, params); | ||
} | ||
else if (error instanceof Error) { | ||
else { | ||
(_b = extra === null || extra === void 0 ? void 0 : extra.rejectedReaction) === null || _b === void 0 ? void 0 : _b.call(extra, params, error); | ||
} | ||
else { | ||
(_c = extra === null || extra === void 0 ? void 0 : extra.rejectedReaction) === null || _c === void 0 ? void 0 : _c.call(extra, params, "Unknown Failure"); | ||
} | ||
}) | ||
@@ -109,0 +106,0 @@ .finally(() => { |
{ | ||
"name": "zustand-fetching", | ||
"version": "1.0.2-beta", | ||
"version": "1.0.2", | ||
"private": false, | ||
@@ -20,3 +20,2 @@ "description": "Zustand fetching helpers", | ||
"scripts": { | ||
"analyze:rollup": "rollup --config --analyze", | ||
"check:lint": "eslint src/**/*.{ts,tsx,js}", | ||
@@ -27,6 +26,3 @@ "build:ts": "del-cli dist && tsc --noEmit false", | ||
"fix:prettier": "prettier --write src/**/*.{json}", | ||
"prod-bundle:rollup": "rollup --config rollup.config.js", | ||
"publish:package": "del-cli tmp && clean-publish --temp-dir tmp", | ||
"sort:package": "npx sort-package-json", | ||
"start:rollup": "rollup --config --configDebug -w" | ||
"sort:package": "npx sort-package-json" | ||
}, | ||
@@ -64,35 +60,18 @@ "husky": { | ||
"devDependencies": { | ||
"@babel/core": "^7.16.7", | ||
"@rollup/plugin-commonjs": "^21.0.1", | ||
"@rollup/plugin-json": "^4.1.0", | ||
"@rollup/plugin-node-resolve": "^13.3.0", | ||
"@rollup/plugin-replace": "^3.0.1", | ||
"@rollup/plugin-strip": "^2.1.0", | ||
"@types/react": "17.0.38", | ||
"@typescript-eslint/eslint-plugin": "^5.9.1", | ||
"@typescript-eslint/parser": "^5.9.1", | ||
"babel-eslint": "^10.1.0", | ||
"clean-publish": "^3.4.5", | ||
"date-fns": "^2.28.0", | ||
"del-cli": "^4.0.1", | ||
"eslint": "^8.6.0", | ||
"eslint-config-prettier": "^8.3.0", | ||
"eslint-plugin-flowtype": "^8.0.3", | ||
"eslint-plugin-import": "^2.25.4", | ||
"eslint-plugin-jsx-a11y": "^6.4.1", | ||
"eslint-plugin-prettier": "^4.0.0", | ||
"eslint-plugin-react": "^7.24.0", | ||
"eslint-plugin-react-hooks": "^4.3.0", | ||
"@types/react": "^18.0.15", | ||
"@typescript-eslint/eslint-plugin": "^5.32.0", | ||
"@typescript-eslint/parser": "^5.32.0", | ||
"clean-publish": "^4.0.1", | ||
"del-cli": "^5.0.0", | ||
"eslint": "^8.21.0", | ||
"eslint-config-prettier": "^8.5.0", | ||
"eslint-plugin-import": "^2.26.0", | ||
"eslint-plugin-prettier": "^4.2.1", | ||
"eslint-plugin-react": "^7.30.1", | ||
"eslint-plugin-react-hooks": "^4.6.0", | ||
"eslint-plugin-simple-import-sort": "^7.0.0", | ||
"husky": "^6.0.0", | ||
"lint-staged": "^11.0.0", | ||
"prettier": "^2.3.1", | ||
"react": "^17.0.2", | ||
"rollup": "^2.51.1", | ||
"rollup-plugin-analyzer": "^4.0.0", | ||
"rollup-plugin-peer-deps-external": "^2.2.4", | ||
"rollup-plugin-smart-asset": "^2.1.2", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"rollup-plugin-typescript2": "^0.31.1", | ||
"rollup-plugin-visualizer": "^5.7.1", | ||
"lint-staged": "^13.0.3", | ||
"prettier": "^2.7.1", | ||
"react": "^18.2.0", | ||
"typescript": "^4.7.4", | ||
@@ -103,3 +82,3 @@ "zustand": "^4.0.0" | ||
"react": ">=17", | ||
"zustand": ">=3" | ||
"zustand": ">=4" | ||
}, | ||
@@ -115,3 +94,9 @@ "engines": { | ||
"license": "MIT", | ||
"keywords": "zustand, fetching, state, store, helpers" | ||
"keywords": [ | ||
"zustand", | ||
"fetching", | ||
"state", | ||
"store", | ||
"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 |
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
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
18
1
61614
387
429