Managed Redux Toolkit

Auto-generate your Redux Toolkit code

A library written specifically for your application, without you having to write it.

Auto-generated RTK definitions

Query and mutation hooks to interact with your backend with built-in caching and optimistic updates

State management simplified++

Advanced backend synchronization and UI state management patterns out-of-the box minus the usual learning curve

Zero boilerplate

Intuitive API over custom written code requiring minimal configuration for quick start-up and smooth DevEx

Open-source Redux Declarative Typescript Auto-managed Unified state layer

    // generated RTK definitions
    import {
        selectTasks, selectTasksById,
        selectTasksIds, useGetTasksQuery,
        usePostTasksMutation, useDeleteTaskMutation
    } from "./tasksData";
    import {
        selectColors, selectColorsById,
        selectColorsIds, useGetColorsQuery,
    } from "./colorsData";

Simply `npx celestial openAPI.json ./` and get a comprehensive list of query and mutation hooks tailored to your backend.
Celestial also generates default selectors providing common operations over the data fetched from the backend.
It is like using a module encapsulating your backend interaction, without having to write it yourself!

Injecting data into components is declarative: simply call the provided query hook and then the suitable selector.
The various nuances of data fetching such as loading & error states, normalization, duplicate requests, request cancellation are handled automatically.
The fetched data is cached and used to serve subsequent requests for the data, enhancing performance of the UI.

    // call the hooks
    useGetColorsQuery()
    useGetTasksQuery()

    // inject data
    const todo = useSelector(selectTasksById(id))
    const allColors = useSelector(selectColors)

    // initialize mutation hook
    const [ addTask ] = usePostTasksMutation()

    // this will issue a POST on /tasks endpoint
    addTask({newTask: {text: "my new todo"}})

Updates are just as straightforward: just call the provided mutation hook with the usual arguments.
Updates are optimistic by default, reflecting in all components instantaneously, enabling a snappy user experience.

Celestial abstracts away all details of frontend state management, making local state management as intuitive as manipulating an in-memory map.
Initialize state with `useCacheInit`, access stored state anywhere with `selectCache`, update state with `useCacheUpdate`. No bars on how, when and where to update state.
All the benefits of Redux but with a simple, intuitive API.

    // initialize cache to manage local state
    useCacheInit("status",
        { All: 'all', Active: 3, Completed: 1,});

    // update cache
    const onStatusChange = (status) => {
        cacheUpdate("status", status)
    }

We write the backend wiring code for your frontend. You get simple-to-use hooks,
which implement advanced state management patterns to supercharge your frontend.

Try it out yourself:

A todo App

Jira Clone

Shopping Cart