Over Stateful

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

See Demo On Codesandbox

✨ 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 >  ·