Skip to content

Utility function for creating stores for global state management with the context-API approach in react applications.

Notifications You must be signed in to change notification settings

adiathasan/react-store-maker

Repository files navigation

React Store maker

Create multiple stores with providers and get the store and dispatch hook for free with type safety!

How to use it

Install

npm install react-store-maker
or
yarn add react-store-maker

Creating store with createStore function!

// ThemeConfig.ts
import { createStore } from 'react-store-maker';

export type Theme = 'light' | 'dark';

const init: Theme = 'light';

export type ThemeActions = { type: 'SET_DARK'; payload: 'dark' } | { type: 'SET_LIGHT'; payload: 'light' };

const reducer = (state: Theme = init, action: ThemeActions) => {
	switch (action.type) {
		case 'SET_LIGHT':
			return action.payload;
		case 'SET_DARK':
			return action.payload;
		default:
			return state;
	}
};

const [ThemeProvider, useThemeStore, useThemeDispatch] = createStore(init, reducer);

export { ThemeProvider, useThemeStore, useThemeDispatch };

// using with custom hook
export const useTheme = () => {
	const theme = useThemeStore();
	const dispatch = useThemeDispatch();

	const toggleTheme = () => {
		const newThemeAction: ThemeActions =
			theme === 'light' ? { type: 'SET_DARK', payload: 'dark' } : { type: 'SET_LIGHT', payload: 'light' };

		dispatch(newThemeAction);
	};

	return {
		toggleTheme,
		theme,
	};
};

Use it any where in your app after nesting at the top level

// App.tsx
import { ThemeProvider } from './ThemeConfig';
import { useTheme, useThemeStore } from './ThemeConfig';

const App = () => {
	return (
		<ThemeProvider>
			<Header />
			<ToggleThemeBtn />
		</ThemeProvider>
	);
};

const Header = () => {
	const theme = useThemeStore();

	return (
		<div>
			<h1>The theme is - {theme}</h1>
		</div>
	);
};

export const ToggleThemeBtn = () => {
	const { toggleTheme } = useTheme();

	return <button onClick={toggleTheme}>Toggle theme</button>;
};

Use multiple store providers for seperating logic

const App = () => {
	return (
		<ThemeProvider>
			<AuthProvider>
				<Header />
				<ToggleThemeBtn />
			</AuthProvider>
		</ThemeProvider>
	);
};

// login.tsx
const Login = () => {
	const { user } = useAuthStore();

	const dispatch = useAuthDispatch();

	return (
		<div>
			<h1>welcome - {user}</h1>
			<button onClick={() => dispatch({ type: 'LOGOUT' })}>Logout</button>
		</div>
	);
};

About

Utility function for creating stores for global state management with the context-API approach in react applications.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published