Light weight react state management hook for managing data in global store for react applications to reduce complexity which we have while using redux store or similar kind of store
npm install saint-jsThis is another react hook which make life simpler in terms of frontend state management. It will automatically generate hook functions which contains latest updated value of that key and action creator which will update data in store and will be catch by same copy variable which eventually rerender the functional component where state management variable are used.
This is is very lightweight lib having no dependencies and react 16.8 and above as peer dependencies.
- Reduce overhead of managing actions and reducers in codebase
- Very easy to use
- Improve code readability
- Reduce final bundle size
- Reduce compile time as there is lesser file then any state management library
``
npm i saint-js
After installing saint-js, in your react app's index file you need to import Provider component and pass initial state to it as we do with redux or any other state management library.
`bash`
import React from 'react';
import { Provider } from "saint-js";
const initialStore = {
user: {},
agent: {},
student: {},
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
- once setup is done, it will generate data variables and actions to update store data based individual key defined in initialStore object
1.If you need to access multiple keys in single component then below method is recommended
`bash
import { actions } from "saint-js";
//1st way you can extract actions and data variables
via destructuring actions object, based on initialStore
which we defined on above setup step it will generate
individual hook functions for each key with use word prepended as per standard naming convention of any normal hook
const {useUsers, useAgent, useStudent} = actions; // after extracting required hook functions we can call to get those keys value and action creator function like
const { userData, setUserData } = useUser(); // keyname with 'Data' word appended to it
const { agentData, setAgentData } = useAgent(); // keyname with 'Data' word appended to it
const { studentData, setStudentData } = useStudent(); // keyname with 'Data' word appended to it
);
`
2. If you find only couple of actions need to be used inside of component then useSaint() hook is recommended way
`bash
import { useSaint } from "saint-js";
const { userData, setUserData } = useSaint('user'); // keyname with 'Data' word appended to it
const { agentData, setAgentData } = useSaint('agent'); // keyname with 'Data' word appended to it
const { studentData, setStudentData } = useSaint('student'); // keyname with 'Data' word appended to it
// show data using state variable extracted from action hook function
Once you done with above things you can use variable and setter methods as similar as any other useState hook just here we are doing object destructuring in above step instead of Array Destructuring and use them like following way
bashuseEffect(() => {
setAgentData("new Data...');
setStudentData("new Data...');
}, [userData, setUserData]);
``- Typescript support
- API management hooks
- Improve framework support
> GitHub @PrashantShah(psd8) ·
> LinkedIn @PrashantShah(psd8) ·
> Stack-Overflow @PrashantShah(psd8)