repos / starfx

commit

9756e62

parent

187ff1a

author

Eric Bower

date

2024-02-16 15:18:21 +0000 UTC

docs: react

  1@@ -37,3 +37,126 @@ function App() {
  2   );
  3 }
  4 ```
  5+
  6+# hooks
  7+
  8+## `useSelector`
  9+
 10+[See `react-redux` docs](https://react-redux.js.org/api/hooks#useselector)
 11+
 12+## `useDispatch`
 13+
 14+[See `react-redux` docs](https://react-redux.js.org/api/hooks#usedispatch)
 15+
 16+## `useLoader`
 17+
 18+This selector will accept an action creator or action and return the loader
 19+associated with it.
 20+
 21+```tsx
 22+import { useLoader } from "starfx/react";
 23+
 24+const log = thunks.create<string>("log");
 25+
 26+function App() {
 27+  // this will grab loader for any `log` thunks dispatched
 28+  // `action.payload.name`
 29+  const loaderAny = useLoader(log);
 30+  // this will grab loader a specific `log` thunk dispatched
 31+  // `action.payload.key`
 32+  const loader = useLoader(log("specific thunk"));
 33+}
 34+```
 35+
 36+## `useApi`
 37+
 38+useApi will take an action creator or action itself and fetch the associated
 39+loader and create a `trigger` function that you can call later in your react
 40+component.
 41+
 42+This hook will _not_ fetch the data for you because it does not know how to
 43+fetch data from your redux state.
 44+
 45+```ts
 46+import { useApi } from 'starfx/react';
 47+
 48+import { api } from './api';
 49+
 50+const fetchUsers = api.get('/users', function*() {
 51+  // ...
 52+});
 53+
 54+const View = () => {
 55+  const { isLoading, trigger } = useApi(fetchUsers);
 56+  useEffect(() => {
 57+    trigger();
 58+  }, []);
 59+  return <div>{isLoading ? : 'Loading' : 'Done!'}</div>
 60+}
 61+```
 62+
 63+## `useQuery`
 64+
 65+useQuery uses [useApi](#useapi) and automatically calls `useApi().trigger()`
 66+
 67+```ts
 68+import { useQuery } from 'starfx/react';
 69+
 70+import { api } from './api';
 71+
 72+const fetchUsers = api.get('/users', function*() {
 73+  // ...
 74+});
 75+
 76+const View = () => {
 77+  const { isLoading } = useQuery(fetchUsers);
 78+  return <div>{isLoading ? : 'Loading' : 'Done!'}</div>
 79+}
 80+```
 81+
 82+## `useCache`
 83+
 84+useCache uses [useQuery](#usequery) and automatically selects the cached data
 85+associated with the action creator or action provided.
 86+
 87+```ts
 88+import { useCache } from 'starfx/react';
 89+
 90+import { api } from './api';
 91+
 92+const fetchUsers = api.get('/users', api.cache());
 93+
 94+const View = () => {
 95+  const { isLoading, data } = useCache(fetchUsers());
 96+  return <div>{isLoading ? : 'Loading' : data.length}</div>
 97+}
 98+```
 99+
100+## `useLoaderSuccess`
101+
102+useLoaderSuccess will activate the callback provided when the loader transitions
103+from some state to success.
104+
105+```ts
106+import { useApi, useLoaderSuccess } from "starfx/react";
107+
108+import { api } from "./api";
109+
110+const createUser = api.post("/users", function* (ctx, next) {
111+  // ...
112+});
113+
114+const View = () => {
115+  const { loader, trigger } = useApi(createUser);
116+  const onSubmit = () => {
117+    trigger({ name: "bob" });
118+  };
119+
120+  useLoaderSuccess(loader, () => {
121+    // success!
122+    // Use this callback to navigate to another view
123+  });
124+
125+  return <button onClick={onSubmit}>Create user!</button>;
126+};
127+```