{"id":30046694,"url":"https://github.com/rajkumar4041/use-redux-state","last_synced_at":"2025-08-07T08:53:22.949Z","repository":{"id":307805631,"uuid":"1026831201","full_name":"rajkumar4041/use-redux-state","owner":"rajkumar4041","description":"🚀 A powerful \u0026 lightweight React hook library that simplifies Redux state management with a familiar useState-like API. Built on Redux Toolkit for optimal performance.","archived":false,"fork":false,"pushed_at":"2025-08-02T10:44:34.000Z","size":6196,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-02T10:59:19.624Z","etag":null,"topics":["global-state","javascript","npm-package","react","react-hooks","react-library","redux","redux-saga","redux-store","redux-thunk","redux-toolkit","reduxtoolkit","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/redux-toolkit-state","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajkumar4041.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-26T17:48:50.000Z","updated_at":"2025-08-02T10:44:37.000Z","dependencies_parsed_at":"2025-08-02T10:59:22.618Z","dependency_job_id":"e11de6c5-afe4-4248-9196-4841339ba286","html_url":"https://github.com/rajkumar4041/use-redux-state","commit_stats":null,"previous_names":["rajkumar4041/use-redux-state"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/rajkumar4041/use-redux-state","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajkumar4041%2Fuse-redux-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajkumar4041%2Fuse-redux-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajkumar4041%2Fuse-redux-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajkumar4041%2Fuse-redux-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajkumar4041","download_url":"https://codeload.github.com/rajkumar4041/use-redux-state/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajkumar4041%2Fuse-redux-state/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269227852,"owners_count":24381837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["global-state","javascript","npm-package","react","react-hooks","react-library","redux","redux-saga","redux-store","redux-thunk","redux-toolkit","reduxtoolkit","state-management","typescript"],"created_at":"2025-08-07T08:53:21.833Z","updated_at":"2025-08-07T08:53:22.928Z","avatar_url":"https://github.com/rajkumar4041.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 redux-toolkit-state\n\n[![npm version](https://badge.fury.io/js/use-redux-state.svg)](https://www.npmjs.com/package/redux-toolkit-state)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-20232A?logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n\nA powerful and lightweight React hook library that simplifies Redux state management with a familiar `useState`-like API. Built on top of Redux Toolkit for optimal performance and developer experience\n\n[Documentation/demo](https://use-redux-state-examples-qlq9.vercel.app/)\n| [Npm Registry](https://www.npmjs.com/package/redux-toolkit-state)\n| [GitHub Repo](https://github.com/rajkumar4041/use-redux-state)\n\n## ✨ Features\n\n- 🎯 **Simple API**: Use redux State with a familiar `useState`-like interface\n- 🔄 **Dynamic State Creation**: Automatically create and manage Redux slices on-demand\n- 🎨 **TypeScript Support**: Full TypeScript support with excellent type inference\n- ⚡ **Performance Optimized**: Built on Redux Toolkit for optimal performance\n- 🔧 **Flexible Selectors**: Advanced state selection capabilities\n- 🚀 **Zero Configuration**: Minimal setup required\n- 📦 **Lightweight**: Small bundle size with no unnecessary dependencies\n\n## 📦 Installation\n\n```bash\nnpm install redux-toolkit-state\n```\n\nor\n\n```bash\nyarn add redux-toolkit-state\n```\n\n## 🚀 Quick Start\n\n### 1. Wrap your app with the provider\n\n```tsx\nimport { GlobalReduxProvider } from 'use-toolkit-state';\n\nfunction App() {\n  return (\n    \u003cGlobalReduxProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/GlobalReduxProvider\u003e\n  );\n}\n```\n\n### 2. Use redux State anywhere in your app\n\n```tsx\nimport { useReduxState } from 'use-toolkit-state';\n\nfunction Counter() {\n  const [count, setCount] = useReduxState('counter', 0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 📚 API Reference\n\n### `useReduxState(key, initialValue?)`\n\nThe main hook for managing redux State. Works just like `useState` but with global scope.\n\n**Parameters:**\n\n- `key` (string): Unique identifier for the redux State\n- `initialValue` (optional): Initial value for the state\n\n**Returns:**\n\n- `value`: Current state value\n- `setValue`: Function to update the entire state\n- `update`: Function to merge partial updates\n- `reset`: Function to reset state to initial value\n\n```tsx\nconst [value, setValue, { update, reset }] = useReduxState(key, initialValue);\n```\n\n### `useReduxStateValue(key)`\n\nGet the entire value of a redux State without a selector.\n\n```tsx\nconst value = useReduxStateValue(key);\n```\n\n### `useReduxStateSetValue(key, initialValue?)`\n\nProvide only Setter [setVal,update]\n\n#### note : update is for partial update\n\n```tsx\nconst [setValue, update] = useReduxStateSetValue(key);\n\n// update (partially)\n// setValue (setter)\n```\n\n### `useReduxStateReset(key)`\n\nProvide Reset Handler to reset Particular slice to its initial state\n\n```tsx\nconst resetFnc = useReduxStateReset(key);\n\n//call while need\nresetFnc();\n```\n\n### `useReduxStateSelector(key, selector)`\n\nSelect specific parts of redux State with a selector function.\n\n```tsx\nconst selectedValue = useReduxStateSelector(key, (state) =\u003e state.someProperty);\n```\n\n### `useMultipleGlobalStates(keys)`\n\nSelect multiple redux States at once.\n\n```tsx\nconst states = useMultipleGlobalStates(['user', 'settings', 'theme']);\n```\n\n## 🎯 Examples\n\n### Basic Usage\n\n```tsx\nimport { useReduxState } from 'use-toolkit-state';\n\nfunction UserProfile() {\n  const [user, setUser] = useReduxState('user', {\n    name: 'John Doe',\n    email: 'john@example.com',\n    age: 30,\n  });\n\n  const updateName = (newName: string) =\u003e {\n    setUser({ ...user, name: newName });\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003e{user.name}\u003c/h2\u003e\n      \u003cp\u003e{user.email}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e updateName('Jane Doe')}\u003eUpdate Name\u003c/button\u003e\n      {/**`DATA` accessible to the child component **/}\n      \u003cChildComponent /\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst ChildComponent = () =\u003e {\n  // getter variable with state\n  const [userState] = useReduxState('user');\n\n  // without state (value getter)\n  const user = useReduxStateValue('user');\n\n  return \u003cdiv\u003e{user.name}\u003c/div\u003e;\n};\n```\n\n### Using Partial Updates\n\n```tsx\nfunction Settings() {\n  const [settings, setSettings, { update }] = useReduxState('settings', {\n    theme: 'light',\n    language: 'en',\n    notifications: true,\n  });\n\n  const toggleTheme = () =\u003e {\n    update({ theme: settings.theme === 'light' ? 'dark' : 'light' });\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCurrent theme: {settings.theme}\u003c/p\u003e\n      \u003cbutton onClick={toggleTheme}\u003eToggle Theme\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Advanced State Selection\n\n```tsx\nfunction UserList() {\n  // Select only the users array from the State\n  const users = useReduxStateSelector('users', (state) =\u003e state.list);\n\n  // Select multiple states\n  const { user, settings } = useMultipleGlobalStates(['user', 'settings']);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003eWelcome, {user.name}!\u003c/h3\u003e\n      \u003cp\u003eTheme: {settings.theme}\u003c/p\u003e\n      \u003cul\u003e\n        {users.map((user) =\u003e (\n          \u003cli key={user.id}\u003e{user.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Shopping Cart Example\n\n```tsx\nfunction ShoppingCart() {\n  const [cart, setCart, { update, reset }] = useReduxState('cart', {\n    items: [],\n    total: 0,\n  });\n\n  const addItem = (item) =\u003e {\n    const newItems = [...cart.items, item];\n    const newTotal = newItems.reduce((sum, item) =\u003e sum + item.price, 0);\n    update({ items: newItems, total: newTotal });\n  };\n\n  const clearCart = () =\u003e {\n    reset(); // Reset to initial state\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003eShopping Cart ({cart.items.length} items)\u003c/h3\u003e\n      \u003cp\u003eTotal: ${cart.total}\u003c/p\u003e\n      \u003cbutton onClick={clearCart}\u003eClear Cart\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 🔧 Advanced Usage\n\n### Store Management\n\n```tsx\nimport { clearSlices, getRegisteredKeys, getStore } from 'use-toolkit-state';\n\n// Get the store instance\nconst store = getStore();\n\n// Get all registered state keys\nconst keys = getRegisteredKeys();\n\n// Clear all slices (useful for testing)\nclearSlices();\n```\n\n### TypeScript with Custom Types\n\n```tsx\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\ninterface AppState {\n  user: User;\n  settings: {\n    theme: 'light' | 'dark';\n    language: string;\n  };\n}\n\nfunction TypedComponent() {\n  const [user, setUser] = useReduxState\u003cUser\u003e('user', {\n    id: '1',\n    name: 'John Doe',\n    email: 'john@example.com',\n  });\n\n  const settings = useReduxStateValue\u003cAppState['settings']\u003e('settings');\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.\n\n### How to Contribute\n\n1. **Fork the repository**\n2. **Create a feature branch** (`git checkout -b feature/amazing-feature`)\n3. **Make your changes** following our coding standards\n4. **Add tests** for new functionality\n5. **Commit your changes** (`git commit -m 'Add amazing feature'`)\n6. **Push to the branch** (`git push origin feature/amazing-feature`)\n7. **Open a Pull Request**\n\n### Development Setup\n\n```bash\n# Fork and clone the repository\ngit clone https://github.com/rajkumar4041/use-redux-state.git\ncd use-redux-state\n\n# Install dependencies\nnpm install\n\n# Start development mode\nnpm run dev\n\n# Build the project\nnpm run build\n```\n\n### Code Standards\n\n- Follow TypeScript best practices\n- Add JSDoc comments for public APIs\n- Write meaningful commit messages\n- Include tests for new features\n- Update documentation as needed\n\nFor detailed guidelines, see our [Contributing Guide](CONTRIBUTING.md).\n\n## 🐛 Bug Reports\n\nFound a bug? We'd love to help fix it! Please report bugs using our [bug report template](https://github.com/rajkumar4041/use-redux-state/issues/new?template=bug_report.md).\n\n### Before Reporting\n\n- Check if the issue has already been reported\n- Try the latest version of the package\n- Provide a minimal reproduction example\n- Include your environment details\n\n### What to Include\n\n- Clear description of the bug\n- Steps to reproduce\n- Expected vs actual behavior\n- Code example\n- Environment information (OS, browser, versions)\n\n## 🔒 Security\n\nWe take security seriously. If you discover a security vulnerability, please report it privately.\n\n### Reporting Security Issues\n\n**Do not create a public GitHub issue for security vulnerabilities.**\n\nInstead, please email us at: **rajkumarrathod414@gmail.com**\n\n### What to Include\n\n- Description of the vulnerability\n- Steps to reproduce\n- Potential impact\n- Suggested fix (if any)\n\n### Response Timeline\n\n- **Initial response**: Within 48 hours\n- **Investigation**: Prompt and thorough\n- **Fix release**: As quickly as possible\n- **Public disclosure**: Coordinated with reporter\n\nFor more details, see our [Security Policy](.github/SECURITY.md).\n\n## 📞 Support\n\nNeed help? We're here to support you!\n\n### Getting Help\n\n1. **📖 Documentation**: Check our [README](README.md) and [examples](https://use-redux-state-examples-qlq9.vercel.app/)\n2. **🔍 Issues**: Search [existing issues](https://github.com/rajkumar4041/use-redux-state/issues)\n\u003c!-- 3. **💬 Discussions**: Join our [GitHub Discussions](https://github.com/rajkumar4041/use-redux-state/discussions) --\u003e\n3. **📧 Email**: Contact us directly at rajkumarrathod414@gmail.com\n\n### Common Issues\n\n**Installation Problems**\n\n```bash\n# Make sure you're using the correct package name\nnpm install redux-toolkit-state\n\n# For TypeScript support\nnpm install --save-dev @types/react @types/react-redux\n```\n\n**Runtime Errors**\n\n```tsx\n// ❌ Wrong - missing provider\nfunction App() {\n  return \u003cYourApp /\u003e;\n}\n\n// ✅ Correct - with provider\nimport { GlobalReduxProvider } from 'use-toolkit-state';\n\nfunction App() {\n  return (\n    \u003cGlobalReduxProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/GlobalReduxProvider\u003e\n  );\n}\n```\n\n**State Access Issues**\n\n```tsx\n// ❌ Wrong - accessing non-existent state\nconst [user, setUser] = useReduxState('user');\n\n// ✅ Correct - provide initial value\nconst [user, setUser] = useReduxState('user', { name: '', email: '' });\n```\n\n### Support Channels\n\n- **📧 Email**: rajkumarrathod414@gmail.com (24-48 hour response)\n- **🐛 Issues**: [GitHub Issues](https://github.com/rajkumar4041/use-redux-state/issues)\n  \u003c!-- - **💬 Discussions**: [GitHub Discussions](https://github.com/rajkumar4041/use-redux-state/discussions) --\u003e\n  \u003c!-- - **📖 Wiki**: [GitHub Wiki](https://github.com/rajkumar4041/use-redux-state/wiki) --\u003e\n\nFor detailed support information, see our [Support Guide](.github/SUPPORT.md).\n\n## 🔗 Quick Links\n\n- **[📖 Contributing](CONTRIBUTING.md)** - How to contribute to this project\n- **[🐛 Bug Reports](https://github.com/rajkumar4041/use-redux-state/issues/new?template=bug_report.md)** - Report a bug\n- **[🔒 Security](.github/SECURITY.md)** - Security policy and vulnerability reporting\n- **[📞 Support](.github/SUPPORT.md)** - Get help and support\n\u003c!-- - **[📋 Changelog](CHANGELOG.md)** - Version history and updates --\u003e\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Built with [Redux Toolkit](https://redux-toolkit.js.org/)\n- Inspired by React's `useState` hook\n- Made with ❤️ for the React community\n- Special thanks to all our contributors and users\n\n---\n\n**Made with ❤️ by [Rajkumar Rathod](https://github.com/rajkumar4041)**\n\nIf you find this library helpful, please consider giving it a ⭐ on GitHub! [useReduxState](https://github.com/rajkumar4041/use-redux-state)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajkumar4041%2Fuse-redux-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajkumar4041%2Fuse-redux-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajkumar4041%2Fuse-redux-state/lists"}