https://github.com/neurosnap/starfx

A modern approach to side-effect and state management for web apps.
https://github.com/neurosnap/starfx

front-end react redux side-effects state-management structured-concurrency web-app

Last synced: 8 days ago
JSON representation

A modern approach to side-effect and state management for web apps.

• Host: GitHub
• URL: https://github.com/neurosnap/starfx
• Owner: neurosnap
• License: mit
• Created: 2022-12-07T15:45:59.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-19T15:48:07.000Z (8 months ago)
• Last Synced: 2024-05-01T15:52:45.064Z (8 months ago)
• Topics: front-end, react, redux, side-effects, state-management, structured-concurrency, web-app
• Language: TypeScript
• Homepage: https://starfx.bower.sh
• Size: 551 KB
• Stars: 76
• Watchers: 5
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![starfx](./docs/static/logo.svg)

# 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](https://starfx.bower.sh)

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

```tsx

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 (

    

      

    

  );

}

function Example() {

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

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

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

  return (

    


      
{data.name}

      
{data.description}

      👀 {data.subscribers_count}{" "}

      ✨ {data.stargazers_count}{" "}

      🍴 {data.forks_count}

    

  );

}

```