over-stateful
v1.0.0
Published
A small state management with less setup and super scalability in your react app.
Downloads
2
Maintainers
Readme
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 > ·