repos / starfx

commit

81dea06

parent

b84e692

author

Eric Bower

date

2023-11-23 02:44:14 +0000 UTC

docs: readme

 1@@ -31,17 +31,26 @@ Read my introductory blog post:
 2 
 3 # example: thunks are tasks for business logic
 4 
 5+They also come with built-in support for a middleware stack (like `express`).
 6+This provides a familiar and powerful abstraction for async flow control for all
 7+thunks and endpoints.
 8+
 9+Why does the BE get to enjoy middleware but not the FE?
10+
11 ```ts
12 import { createThunks, mdw } from "starfx";
13 
14 const thunks = createThunks();
15+// catch errors from task and logs them with extra info
16 thunks.use(mdw.err);
17+// where all the thunks get called in the middleware stack
18 thunks.use(thunks.routes());
19 
20+// create a thunk
21 const log = thunks.create("log", function* (ctx, next) {
22   console.log("before calling next middleware");
23   yield* next();
24-  console.log("after all middleware have run");
25+  console.log("after all remaining middleware have run");
26 });
27 
28 store.dispatch(log());
29@@ -49,14 +58,18 @@ store.dispatch(log());
30 
31 # example: endpoints are tasks for managing HTTP requests
32 
33+Building off of `createThunks` we have a way to easily manage http requests.
34+
35 ```ts
36 import { createApi, mdw } from "starfx";
37 
38 const api = createApi();
39+// composition of handy middleware for createApi to function
40 api.use(mdw.api());
41 api.use(api.routes());
42 api.use(mdw.fetch({ baseUrl: "https://jsonplaceholder.typicode.com" }));
43 
44+// automatically cache results in datastore
45 export const fetchUsers = api.get("/users", api.cache());
46 
47 store.dispatch(fetchUsers());
48@@ -109,6 +122,29 @@ const store = configureStore({ initialState });
49 store.dispatch(fetchUsers());
50 ```
51 
52+# example: the view
53+
54+```tsx
55+import { useApi, useDispatch, useSelector } from "starfx/react";
56+import { db } from "./store.ts";
57+import { fetchUsers } from "./api.ts";
58+
59+function App() {
60+  const users = useSelector(db.users.selectTableAsList);
61+  const loader = useApi(fetchUsers());
62+
63+  return (
64+    <div>
65+      {users.map((u) => <div>{u.name}</div>)}
66+      <div>
67+        <button onClick={loader.trigger()}>fetch users</button>
68+        {loader.isLoading ? <div>Loading ...</div> : null}
69+      </div>
70+    </div>
71+  );
72+}
73+```
74+
75 # usage
76 
77 Please see [examples repo](https://github.com/neurosnap/starfx-examples).