neurosnap / starfx

A micro-mvc framework for react apps

starfx

A micro-mvc framework for react apps.

If we think in terms of MVC, if react is the View, then starfx is the Model and Controller.

Get started

Features:

• A powerful middleware system to fetch API data
• An immutable and reactive data store
• A task tree side-effect system for handling complex business logic using structured concurrency
• React integration

import { createApi, createSchema, createStore, mdw, timer } from "starfx";
import { Provider, useCache } from "starfx/react";

const [schema, initialState] = createSchema();
const store = createStore({ initialState });

const api = createApi();
// mdw = middleware
api.use(mdw.api({ schema }));
api.use(api.routes());
api.use(mdw.fetch({ baseUrl: "https://api.github.com" }));

const fetchRepo = api.get(
  "/repos/neurosnap/starfx",
  { supervisor: timer() },
  api.cache(),
);

store.run(api.bootup);

function App() {
  return (
    <Provider schema={schema} store={store}>
      <Example />
    </Provider>
  );
}

function Example() {
  const { isInitialLoading, isError, message, data } = useCache(fetchRepo());

  if (isInitialLoading) return "Loading ...";

  if (isError) return `An error has occurred: ${message}`;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

starfx's Issues

Question About this Library

Hi, I found this and it looked interesting, I'm integrating redux-saga currently.

Is this like a mix of redux sagas, but organized into a typed state tree?

I don't mean to oversimplify, thanks!