zustand-fetching - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/examples/fifthExample_Modal.js

 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { create } from "zustand";
 import { createModal } from "../helpers/zustandModal";
-export const useStore = create((set, get) => ({
-    ...createModal(set, get, "modal", { name: "" }),
-}));
 const Component = () => {
@@ -13,3 +10,6 @@ const open = useStore((state) => state.modal.open);
     const { close, atom } = useStore((state) => state.modal);
-    return atom.isOpen ? (_jsxs(_Fragment, { children: ["name: ", atom.data.name, _jsx("button", { onClick: close, children: "close modal" })] })) : (_jsx(_Fragment, {}));
+    return atom.isOpen ? (_jsxs(_Fragment, { children: ["name: ", atom.data.name, " // this name from action call", _jsx("button", { onClick: close, children: "close modal" })] })) : (_jsx(_Fragment, {}));
 };
+export const useStore = create((set, get) => ({
+    ...createModal(set, get, "modal", { name: "" }),
+}));

dist/examples/firstExample_Slice.d.ts

 /// <reference types="react" />
 import { ICreateRequest } from "../helpers/zustandSlice";
+export declare const User: ({ id }: {
+    id: string;
+}) => JSX.Element;
 interface IUserState {
@@ -7,5 +10,2 @@ infoRequest: ICreateRequest<string, IUser>;
 export declare const useUserStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IUserState>>;
-export declare const User: ({ id }: {
-    id: string;
-}) => JSX.Element;
 interface IUser {
@@ -12,0 +12,0 @@ id: string;

dist/examples/firstExample_Slice.js

@@ -6,17 +6,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StatusSwitcher } from "./common";
+// Main component
+export const User = ({ id }) => {
+    const { name, status, error } = useUserStore(dataSelector);
+    const getData = useUserStore((state) => state.infoRequest.action);
+    useEffect(() => {
+        getData(id); // call request using id param
+    }, [getData, id]);
+    return (_jsx("div", { children: _jsxs(StatusSwitcher, { status: status, error: error, children: ["User name: ", _jsx("b", { children: name }) // we will see it when loading will be done
+                , " // we will see it when loading will be done"] }) }));
+};
 export const useUserStore = create((set, get) => ({
     ...createSlice(set, get, "infoRequest", async (id) => {
         const result = await getUserById(id);
-        return { ...result, role: "artist" };
+        return { ...result, role: "artist" }; // you can update your data after request
     }),
 }));
-// Main component
-export const User = ({ id }) => {
+const dataSelector = (state) => {
     var _a;
-    const { atom, action } = useUserStore((state) => state.infoRequest);
-    useEffect(() => {
-        action(id); // call request using id param
-    }, [action, id]);
-    return (_jsx("div", { children: _jsxs(StatusSwitcher, { status: atom.status, error: atom.error.message, children: ["User name: ", _jsx("b", { children: (_a = atom.content) === null || _a === void 0 ? void 0 : _a.name }) // we will see it when loading
-                , " // we will see it when loading will be done"] }) }));
+    return ({
+        name: (_a = state.infoRequest.atom.content) === null || _a === void 0 ? void 0 : _a.name,
+        status: state.infoRequest.atom.status,
+        error: state.infoRequest.atom.error || "some error",
+    });
 };
@@ -23,0 +31,0 @@ const getUserById = async (id) => {

dist/examples/fourthExample_Primitive.js

@@ -5,6 +5,5 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createPrimitive } from "../helpers/zustandPrimitive";
-const initialState = {
-    first: true,
-    second: false,
-    third: false,
+const Component = () => {
+    const { set, value } = useStore((state) => state.check);
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", onChange: (event) => set({ ...value, first: event.target.checked }) }), "first"] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", onChange: (event) => set({ ...value, second: event.target.checked }) }), "second"] })] }));
 };
@@ -16,6 +15,7 @@ const useStore = create((set, get) => ({
             if (check.first) {
-                get().options.add(["Default"]);
+                get().options.add(["Default"]); // some side effect, call after event
             }
         },
         patchEffect: (check) => {
+            // some patch effect, you can update data at the same tick
             if (check.second)
@@ -32,5 +32,6 @@ return { name: "Second" };
 }));
-const Component = () => {
-    const { set, value } = useStore((state) => state.check);
-    return (_jsxs(_Fragment, { children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", onChange: (event) => set({ ...value, first: event.target.checked }) }), "first"] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", onChange: (event) => set({ ...value, second: event.target.checked }) }), "second"] })] }));
+const initialState = {
+    first: true,
+    second: false,
+    third: false,
 };

dist/examples/secondExample_GroupSlice.js

@@ -7,11 +7,5 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useUserStore } from "./firstExample_Slice";
-export const useScheduleStore = create((set, get) => ({
-    ...createGroupSlice(set, get, "infoRequest", async ({ payload, key }) => {
-        return getScheduleById(payload);
-    }),
-}));
-const User = ({ id }) => {
-    var _a, _b;
-    const { atom, action } = useUserStore((state) => state.infoRequest);
-    return (_jsxs("div", { children: ["User name: ", _jsx("b", { children: (_a = atom.content) === null || _a === void 0 ? void 0 : _a.name }), (_b = atom.content) === null || _b === void 0 ? void 0 : _b.schedules.map((schedule) => (_jsx(Schedule, { id: schedule })))] }));
+const User = () => {
+    const content = useUserStore((state) => state.infoRequest.atom.content);
+    return (_jsxs("div", { children: ["User name: ", _jsx("b", { children: content === null || content === void 0 ? void 0 : content.name }), content === null || content === void 0 ? void 0 : content.schedules.map((schedule) => (_jsx(Schedule, { id: schedule })))] }));
 };
@@ -28,2 +22,7 @@ const Schedule = ({ id }) => {
 };
+export const useScheduleStore = create((set, get) => ({
+    ...createGroupSlice(set, get, "infoRequest", async ({ payload, key }) => {
+        return getScheduleById(payload);
+    }),
+}));
 const getScheduleById = async (id) => {
@@ -30,0 +29,0 @@ return new Promise((resolve) => {

dist/examples/thirdExample_List.js

@@ -6,2 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createSlice } from "../helpers/zustandSlice";
+const User = () => {
+    const [name, schedules] = useStore((state) => { var _a; return [(_a = state.infoRequest.atom.content) === null || _a === void 0 ? void 0 : _a.name, state.schedules]; }, shallow);
+    const handleAddSchedule = () => {
+        schedules.add([{ name: "New Schedule" }]);
+    };
+    return (_jsxs("div", { children: ["User name: ", _jsx("b", { children: name }), schedules.list.map((schedule) => (_jsx(Schedule, { schedule: schedule }))), _jsx("button", { onClick: handleAddSchedule, children: "add new" })] }));
+};
 export const useStore = create((set, get) => ({
@@ -15,9 +22,2 @@ ...createSlice(set, get, "infoRequest", async (id) => {
 }));
-const User = () => {
-    const [name, schedules] = useStore((state) => { var _a; return [(_a = state.infoRequest.atom.content) === null || _a === void 0 ? void 0 : _a.name, state.schedules]; }, shallow);
-    const handleAddSchedule = () => {
-        schedules.add([{ name: "New Schedule" }]);
-    };
-    return (_jsxs("div", { children: ["User name: ", _jsx("b", { children: name }), schedules.list.map((schedule) => (_jsx(Schedule, { schedule: schedule }))), _jsx("button", { onClick: handleAddSchedule, children: "add new" })] }));
-};
 const Schedule = ({ schedule }) => {
@@ -24,0 +24,0 @@ const { remove, update } = useStore((state) => state.schedules);

package.json

 {
   "name": "zustand-fetching",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Zustand fetching helpers",

README.md

@@ -6,6 +6,7 @@ # 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**. All examples are made using _TypeScript_
+> What is this library for? We always have standard requests to the backend or boilerplate, so we offer several
+> methods to simplify the work with **zustand**. All examples are made using _TypeScript_
 
-**Please, look in folder examples!**
+**The best way is to start with [this](https://github.com/Hecmatyar/zustand-fetching/tree/main/src/examples) examples
+and then come back to read the documentation**
 
@@ -12,0 +13,0 @@ Problem: All asynchronous requests are actually very similar, but we are constantly faced with our own

New alerts

License Policy Violation

License

This 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

License

This 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

58803

increased by0.95%

Lines of code

931

increased by0.87%

Number of lines in readme file

432

increased by0.23%

No dependency changes