1
2
3# starfx
4
5A micro-mvc framework for react apps.
6
7If we think in terms of MVC, if `react` is the **View**, then `starfx` is the
8**Model** and **Controller**.
9
10[Get started](https://starfx.bower.sh)
11
12Features:
13
14- A powerful middleware system to fetch API data
15- An immutable and reactive data store
16- A task tree side-effect system for handling complex business logic using
17 structured concurrency
18- React integration
19
20```tsx
21import { createApi, createSchema, createStore, mdw, timer } from "starfx";
22import { Provider, useCache } from "starfx/react";
23
24const [schema, initialState] = createSchema();
25const store = createStore({ initialState });
26
27const api = createApi();
28// mdw = middleware
29api.use(mdw.api({ schema }));
30api.use(api.routes());
31api.use(mdw.fetch({ baseUrl: "https://api.github.com" }));
32
33const fetchRepo = api.get(
34 "/repos/neurosnap/starfx",
35 { supervisor: timer() },
36 api.cache(),
37);
38
39store.run(api.bootup);
40
41function App() {
42 return (
43 <Provider schema={schema} store={store}>
44 <Example />
45 </Provider>
46 );
47}
48
49function Example() {
50 const { isInitialLoading, isError, message, data } = useCache(fetchRepo());
51
52 if (isInitialLoading) return "Loading ...";
53
54 if (isError) return `An error has occurred: ${message}`;
55
56 return (
57 <div>
58 <h1>{data.name}</h1>
59 <p>{data.description}</p>
60 <strong>👀 {data.subscribers_count}</strong>{" "}
61 <strong>✨ {data.stargazers_count}</strong>{" "}
62 <strong>🍴 {data.forks_count}</strong>
63 </div>
64 );
65}
66```