react-hands
v1.0.5
Published
React's Own Hands Touching State The Easiest Way!
Downloads
13
Maintainers
Readme
🧤 React Hands
By Hussein Kizz, First Beta Release v1.0.5
React's Own Hands Touching State The Easiest Way!
Unlike others, react hands focuses on easiness and takes a shorthand approach to managing state in your react applications by using react's built in hooks mainly useContext and useReducer which are pretty handy by the way, and also emphasize a single source of truth or global state philosophy to allow managing state at scale a breeze, though local state approach is also supported intuitively. And with that said, react-hands
is a lightweight, simple and easiest to use state management library to help you manage your application's state without having to learn that much anything new, as the library provides a StoreProvider
wrapper component and a useStore
hook for accessing and updating the state just as you would almost do it with react itself, resulting into a simillar and easy to use state management pattern.
Key Features
- 👐 Open Source
- 🤏 Light Weight
- 👌 As Easy As useState()
- 👏 Typscript Support
- 🙏 No Boilerplate
- ✌️ Full Of Handies!
Installation
You can install the react-hands
library using npm or yarn:
npm install react-hands
# or
yarn add react-hands
Usage
React Hands is so easy to use, you can play with it here to see for yourself or follow the step by step instructions below:
Creating the Store
To create the store, use the reactState
function. It takes three arguments:
initialState
: an object representing the initial state of your application's state.actions
: an object containing functions that update the state in response to dispatched actions.middlewares
(optional): an array of middleware functions that modifies the dispatch behavior.
💡Middlewares basically help you mutate state with a custom fucntion or an array of functions in given order, before the dispatched action takes place, this will be available in next release.
Meanwhile here is how to create a store:
// App.jsx
import { reactState } from "react-hands";
const initialState = { count: 0 };
const actions = {
increment: (state, action) => ({ count: state.count + 1 }),
decrement: (state, action) => ({ count: state.count - 1 }),
};
Providing the Store
Wrap your top-level component, app or layout with the StoreProvider
component to provide the store to your app and to all it's child components.
// App.jsx
const { StoreProvider } = reactState(initialState, actions);
function App() {
return (
<StoreProvider>
<MyComponent />
</StoreProvider>
);
}
Accessing the State
To access the state in your components, use the useStore
hook. It returns an array with the current state and the dispatch function, simillar to useState hook in react!
// MyComponent.jsx
import { reactState } from "react-hands";
const { useStore } = reactState();
function MyComponent() {
const [state, dispatch] = useStore();
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
</div>
);
}
💡 Notice: The dispatch type such as increment
should match the same state name in store such as increment
exactly, otherwise react hands will blow an error in console, so watchout and let's continue!
Updating the State
To update the state, dispatch an action to the store. The action is an object with a type
property that corresponds to one of the functions in the actions
object. For example here both the increment and decrement actions increase and decrease the count in store respectively!
const actions = {
increment: (state, action) => ({ count: state.count + 1 }),
decrement: (state, action) => ({ count: state.count - 1 }),
};
// dispatching action...
dispatch({ type: "increment" });
Handling Errors
If an action with an unrecognized type is dispatched, react hands
will log some error to the console and return the current state as is. The error message will usually be reminding you to use the same name as the state in your dispatch action. And more error handlers are being worked on!
🔥 Bonus
Did you know, react-hands supports typescript out of the box, it also provides types for state and dispatch, you just have to import a type like $typeName
from react hands like this for example:
// MyApp.tsx
import { $Action, $State, reactState } from "react-hands";
export default function MyApp() {
const initialState = {
isDarkMode: false,
count: 0,
};
const actions = {
toggleDarkMode: (state: $State) => ({
...state,
isDarkMode: !state.isDarkMode,
}),
increment: (state: $State) => ({
...state,
count: state.count + 1,
}),
decrement: (state: $State) => ({
...state,
count: state.count - 1,
}),
};
const { StoreProvider } = reactState(initialState, actions);
return (
<StoreProvider>
<MyComponent/>
</StoreProvider>
);
}
Conclusion
The react-hands
library provides a simple way to manage state in your React applications. It's easy to use, and its lightweight nature makes it a great option for react projects small or complex. It's still work in progress, therefore contributions are welcomed, we will be updating this documentation to explore other patterns such as adding items to store from any component other than main or top level component, persisting state depsite page reloads etc.
😇 Pro Tip: If it works don't tocuh it, or break that comfort zone and give this a try!!!