Skip to content

codewonders/over-stateful

Repository files navigation


Over Stateful

🐺A small state management with less setup and super scalability in your react app.


npm

NPM

✨ Features

  • 😎 Easy to learn
  • 📦 ~590b (gzipped)
  • 🔥 Easy to scale
  • 🙅‍♂️ Zero dependencies
  • ✂️ Super-flexible API
  • ✅ Fully tested and reliable
  • ⚒ CommonJS, ESM & browser standalone support

🔧 Installation

You can easily install this package with yarn or npm:

$ yarn add over-stateful

or

$ npm install --save over-stateful

📖 Usage

Some usage terms you need to be familar with – createStore, useOverProvider and useOverState, OverProvider, store :

  • createStore, takes in the central state and the central reducers,
  • useOverProvider, internal tool that handles the reducer and state.
  • useOverState, hooks that handle reading state and dispatching actions
  • OverProvider, React element that takes in the store, -store, Proxy object with your state.

Here is a simple example: store.js

export const addOne = () => ({ type: 'ADD_ONE_COUNT' });
export const minusOne = () => ({ type: 'MINUS_ONE_COUNT' });

export const countReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ONE_COUNT':
      return { count: state.count + 1 };
    case 'MINUS_ONE_COUNT':
      return { count: state.count - 1 };
}
import React from 'react';
import { OverProvider, createStore } from 'over-stateful';
import { countReducer } from './store';
import App from './App';

const store = createStore({ count: 0 }, [countReducer]);
export default function Root() {
  return (
    <OverProvider store={store}>
      <App />
    </OverProvider>
  );
}

Comparison with other state management (examples)

With other state mannagement, setup and learning curve is a lot harder and bent you'd have to call/read documentations over and over again ..... For example:

  • Redux state managment
  • Easy State
  • Mobx e.t.c

Meanwhile, with over-stateful, all you need is this, less documentation required to get you going...

import React from 'react';
import { OverProvider, createStore } from 'over-stateful';
import { countReducer } from './store';
import App from './App';

const store = createStore({ count: 0 }, [countReducer]);
export default function Root() {
  return (
    <OverProvider store={store}>
      <App />
    </OverProvider>
  );
}

App.js

import React from 'react';
import { useOverState } from 'over-stateful';

const App = () => {
  const [state, dispatch] = useOverState();
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch(addOne())}> +1 </button>
      <button onClick={() => dispatch(minusOne())}> -1 </button>
    </>
  );
};

🤝 License

MIT © codewonders.dev  ·  GitHub @adenekan41 / codewonders >  · 

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published