React Hook Store with useContext and useReducer
npm install @gtgalone/react-storeReact Hook Store with useContext and useReducer for State Management.
You don't have to use external libraries (redux, mobx, etc..)
- Typescript support
- Unopinionated
- No dependencies
- Tiny package size
``
$ npm install @gtgalone/react-store
or
$ yarn add @gtgalone/react-store
jsx
import React from 'react';import { StoreProvider, useStore } from '@gtgalone/react-store';
// or const { StoreProvider, useStore } = require('@gtgalone/react-store');
const App = () => {
const { state, dispatchState } = useStore();
console.log(state); // { count: 0 }
const increment = () => {
dispatchState({ name: 'count', value: state.count + 1 });
};
const decrement = () => {
dispatchState({ name: 'count', value: state.count - 1 });
};
return (
{state.count}
);
};export default () => {
return (
);
};
`
---
$3
jsx
const App = () => {
const { state, dispatchState } = useStore(); const increment = () => {
dispatchState({ name: 'count', value: state.count + 1 });
};
// return with useMemo.
// Only Re-rendering with state.count change.
return React.useMemo(() => (
{state.count}
), [state.count]);
};
`
---
$3
jsx
const actions = {
INCREMENT: 'increment',
DECREMENT: 'decrement',
RESET: 'reset',
}const App = () => {
const { state, dispatch } = useStore();
const increment = () => {
dispatch({ type: actions.INCREMENT });
};
const decrement = () => {
dispatch({ type: actions.DECREMENT });
};
const reset = () => {
dispatch({ type: actions.RESET, payload: 0 });
};
return (
{state.count}
);
};const reducer = (state, action) => {
switch (action.type) {
case actions.INCREMENT:
return { count: state.count + 1 };
case actions.DECREMENT:
return { count: state.count - 1 };
case actions.RESET:
return { count: action.payload };
default:
throw new Error();
}
};
export default () => {
return (
);
};
`
Return
$3
States what you need to manage in your app globally.\
Type: $3
Built in dispatch function with universial states.\
It is easy and simple. You don't need to make any extra reducer.\
Change single and multiple states with this function.\
Type:\
\
([{ name: 'state name', value: 'any value' }]) => void$3
You can use this function for custom reducer with action.\
Type: \
NOTE Allocated action: actions.SET_STATE`---
- React Checklist - Make Checkbox List Easy and Simple with React Hooks.
- React Quilljs - React Hook Wrapper for Quill(Rich Text Editor).
- Decode URI Component Charset - Decode URI Component with Charset such as 'euc-kr' without tears.
MIT