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

No alert changes

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