Arachnoid NPM | npm.io

📝 Table of Contents

About
Getting Started
Usage
Built Using
TODO
Contributing
Authors
Acknowledgments

🧐 About

🏁 Getting Started

Prerequisites

You should have react setup and running

Using vite

npm create vite

Using CRA

npm create react-app

Installing

Install Arachnoid using npm

npm install arachnoid

Or Yarn

yarn add arachnoid

🎈 Usage

First create a store

import { createStore } from "arachnoid"

const useCountStore = createStore({
    state: {
        count: 0,
    },

    actions: {
        increment: (get, set) => {
            set((state) => ({
                ...state,
                count: state.count + 1,
            })
            )
        }
    }
});

Then bind your components, and that's it!!

Use the hook anywhere, no providers are needed. Dispatch the actions and et'voila! The component will re-render on the changes.

const Test = () => {

    const instance1 = useCountStore();
    return (
        <h1 onClick={() => instance1.dispatch('increment')}>
            Hello {instance1.getState().count}
        </h1>
    )
}

Dealing with asynchronous functions

To use deal with asynchronous function, we can use the function createAsyncAction and use it along with regular archanoid actions.

import { createStore, createAsyncAction } from "arachnoid";

const useAsyncStateStore = createStore({
    state: {
        todo: [],
    },

    actions: {
        asyncFetch: (get, set, { num }) => createAsyncAction(async ({ num }) => {
            const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${num}`);
            return await res.json();
        }, (asyncResponse) => {
            const { data, isLoading, isError } = asyncResponse;

            if (!isLoading && !isError) {
                set(state => ({
                    todo: [...state.todo, ...data],
                }))
            }
        }, { num })
    }
})

The data returned by the async function can be accessed from asyncResponse inside the callback function. We can pass any additional require as a payload while dispatching.

We can then dispatch this asynchronous action like we always do!!

const Test = () => {

    const instance1 = useAsyncStateStore();
    return (<>
        <h1 onClick={() => instance1.dispatch('asyncFetch')}>
            Add Todo
        </h1>
        <ol>
            {
                instance1.getState().todo.map(ele=>(<li>ele.title</li>));
            }
        </ol>
    </>)
}

Using Middlewares

Arachnoid provides bare-bones middleware support for its stores using createArachnoidMiddleware function.

import { createStore, createArachnoidMiddleware } from "arachnoid";

const middleware1 = createArachnoidMiddleware((get, set, action)=>{
    console.log (`${action.name} has been called with payload ${JSON.stringify(action.payload)}`);
})

export const store = createStore({
    state: {
        count: 0,
    },

    actions: {
        increment: (get, set) => {
            set((state) => ({
                ...state,
                count: state.count + 1,
            })
            )
        }
    }
}, [middleware1]);

We can prevent certain actions from using middlewares by passsing ignore actions array to createArrachnoidMiddleware.

import { createStore, createArachnoidMiddleware } from "arachnoid";

const middleware1 = createArachnoidMiddleware((get, set, action)=>{
    console.log (`${action.name} has been called with payload ${JSON.stringify(action.payload)}`);
}, ["decrement"])

export const store = createStore({
    state: {
        count: 0,
    },

    actions: {
        increment: (get, set) => {
            set((state) => ({
                ...state,
                count: state.count + 1,
            })
            )
        },
        decrement: (get, set) => {
            set((state) => ({
                ...state,
                count: state.count - 1,
            })
            )
        }
    }
}, [middleware1]);

Here all the actions except decrement will execute the middleware1.

Adding Listeners

Arachnoid providers bare-bones support for listeners subscribing to the state changes.

We can define listeners while creating the store.

const store = createStore({
    state: {
        count: 0,
    },

    actions: {
        increment: (get, set) => {
            set({
                ...get(),
                count: get().count + 1,
        })
        }
    },
    listeners: {
        test: (get)=>{
            console.table(get())
        }
    }
});

In here the listener test will listen to all the state changes, and execute itself then.

We can also subscribe or unsubscribe to a listener inside a component.

const Test = () => {

   const instance1 = store();

   useEffect(()=>{
       instance.subscribe("test2", get=>console.log(get()))
       instance.unsubscribe('test');
   }, [])

   const handleClick = () => instance2.dispatch('increment')
   return (
       <h1 onClick={handleClick}>
           Hello {instace1.getState().count} {instance2.getState().count}
       </h1>
   )
}