{"id":20118473,"url":"https://github.com/bitcoin-api/react-state-management","last_synced_at":"2026-04-10T01:50:24.285Z","repository":{"id":42869966,"uuid":"248408446","full_name":"bitcoin-api/react-state-management","owner":"bitcoin-api","description":"a.k.a. \"ReduxX\"","archived":false,"fork":false,"pushed_at":"2023-01-06T04:19:00.000Z","size":725,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T08:48:54.873Z","etag":null,"topics":["api","bitcoin","library","management","react","react-native","state"],"latest_commit_sha":null,"homepage":"https://Bitcoin-Api.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitcoin-api.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-19T04:12:07.000Z","updated_at":"2020-10-10T08:35:16.000Z","dependencies_parsed_at":"2023-02-05T07:02:02.133Z","dependency_job_id":null,"html_url":"https://github.com/bitcoin-api/react-state-management","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcoin-api%2Freact-state-management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcoin-api%2Freact-state-management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcoin-api%2Freact-state-management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcoin-api%2Freact-state-management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitcoin-api","download_url":"https://codeload.github.com/bitcoin-api/react-state-management/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241564445,"owners_count":19982958,"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","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":["api","bitcoin","library","management","react","react-native","state"],"created_at":"2024-11-13T19:11:00.129Z","updated_at":"2025-12-31T01:04:08.913Z","avatar_url":"https://github.com/bitcoin-api.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-state-management\n\n[![npm version](https://badge.fury.io/js/react-state-management.svg)](https://badge.fury.io/js/react-state-management)\n\n### react-state-management AKA ReduxX\nA lightweight yet ultra-powerful and robust state management library designed for effortless React and React-Native code development\n\n## Main Features:\n* **all you need to know:** import `getState` and `setState` and you can use those functions anywhere to access and to update your state, so simple!!😌\n* uses ultra high tech **React Hooks** to manage your state!🎣\n* automatically organizes your state in a very clean way🧹\n* popular bonus features such as *Reset to Initial State* and *Multiple ReduxXs*🐲\n* perfect to use with React Native📲🐒🍌\n\n\n--- \n\n### Table of Contents:\n\n#### 1. [How ReduxX Works](#how-reduxx-works)\n\n- [Step 1: Install ReduxX and Set Your Initial Global State](#step-1-install-reduxx-and-set-your-initial-global-state)\n- [Step 2: Set up ReduxX](#step-2-set-up-reduxx)\n- [Step 3: Easily Set and Get Values to and from the Global State](#step-3-easily-set-and-get-values-to-and-from-the-global-state)\n\n#### 2. [Bonus Features](#bonus-features)\n- [Alternate Input Formats for the ReduxX setState and getState Functions](#alternate-input-formats-for-the-reduxx-setstate-and-getstate-functions)\n- [Object Form for Initial State](#object-form-for-initial-state)\n- [Reset to Initial State](#reset-to-initial-state)\n- [Olde Fashioned State Management and Global Use State](#olde-fashioned-state-management-and-global-use-state)\n- [Multiple ReduxXs](#multiple-reduxxs)\n\n\n## How ReduxX works:\n\n\n### Step 1: Install ReduxX and Set Your Initial Global State\n\nTo install ReduxX, input the following npm command:\n```\nnpm install react-state-management --save\n```\n\nIn the directory of your main React component, the most parent component that contains all your other components, add the following `reduxX.js` file:\n\n```.js\nimport ReduxX from 'react-state-management';\n\n\nexport const {\n\n    setUpReduxX,\n    setState,\n    getState,\n\n    /* Optional Exports: */\n    // resetReduxX,\n    // getGlobalUseState,\n    // oldeFashionedStateManagement\n\n} = ReduxX({\n\n    initialState: [\n\n        {\n            keys: [ 'monkey', 'favoriteFood' ],\n\n            value: 'banana',\n        },\n        {\n            // can put a string for the \"keys\" for single key values\n            keys: 'monkey',\n\n            // the value can be of any type,\n            // just like using regular React state\n            value: { name: 'Curious George', bff: 'Donkey Kong' },\n        },\n        {\n            keys: [ 'monkey', 'height' ],\n\n            value: '69cm',\n        },\n        {\n            keys: [ 'hippo', 'status', 'mood' ],\n\n            value: 'hungry',\n        }\n    ]    \n});\n```\n\u003e Notes:\n\u003e\n\u003e a) you can use any number of keys\n\u003e\n\u003e b) technically you can put this reduxX.js file anywhere, but it makes the most sense to put it in your root folder based on how you access it (in Step 3)\n\u003e \n\u003e c) you can alternatively use the [Object Form for Initial State](#object-form-for-initial-state)\n\u003e\n\n### Step 2: Set up ReduxX\n\nIn the most parent component itself,\nthe component that contains all your other components,\nset up the ReduxX global state like the following:\n\n```.js\nimport { useState } from 'react';\n\n// Step 2: a) Import the following setUpReduxX function\n//            from the file you created in Step 1.\n// Note: this particular path assumes the reduxX.js file\n//       is in the same directory as this file\nimport { setUpReduxX } from './reduxX';\n\n\n// Your \"most parent\" component\nexport default () =\u003e {\n\n    setUpReduxX( useState );\n\n    return ...\n};\n```\n\n\n### Step 3: Easily Set and Get Values to and from the Global State\n\nNow anywhere you normally do a React [setState](https://reactjs.org/docs/react-component.html#setstate), you can now `setState` with ReduxX to access a global state and never have to worry about collisions, so exciting!:\n\n```.js\n// some other module\n\nimport { createElement as e } from 'react';\n\nimport { setState, getState } from '/*path to reduxX.js file, the file created in Step 1*/';\n\n\nconst handleClick = () =\u003e {\n\n    /*\n       ReduxX Effortless State Setting and Getting\n    */\n\n    // set the global state for one or more items like this:\n\n    setState(\n\n        {\n            keys: [ 'monkey', 'favoriteFood' ],\n\n            value: 'apple',\n        },\n        {\n            keys: [ 'hippo', 'status', 'mood' ],\n\n            value: 'full'\n        }\n    );\n\n    // get the global state for an item like this:\n\n    const monkeyHeight = getState( 'monkey', 'height' );\n\n    console.log(\n\n        `The reduxX monkey is ${ monkeyHeight } tall!`\n    );\n\n    // should log: The reduxX monkey is 69cm tall!\n};\n\n\nexport default () =\u003e e( 'div', { onClick: handleClick } );\n```\nThis example also includes a ReduxX `getState` invocation. You can use this function anywhere and this function gets the requested value from the global state! Extreme #swaggy🎅🏿👳🏽🤠👲🏻!\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\nWow that's it, \u003cb\u003eso easy!\u003c/b\u003e\n\nAll you need to do is import your `./reduxX.js` file you created in Step 1 and then use `setState` and `getState` to manage your global state (like in Step 3).\n\n---\n## Bonus Features\n\n### Alternate Input Formats for the ReduxX setState and getState Functions\n\nFor your convenience, and for better code readability, the ReduxX `setState` and `getState` functions offer several ways to set and get values to and from the global state.\n\n\n```.js\nimport { setState, getState } from '/*path to reduxX.js file, the file created in Step 1*/';\n\n/*\n   Different input formats for getState\n*/\n\n//  The following four getState invocations are equivalent:\ngetState( 'user' );\ngetState( [ 'user' ] );\ngetState({ keys: 'user' });\ngetState({ keys: [ 'user' ] });\n\n\n//  The following three getState invocations are equivalent:\ngetState( 'user', 'profile' );\ngetState( [ 'user', 'profile' ] );\ngetState({ keys: [ 'user', 'profile' ] });\n\n\n/*\n   Different input formats for setState\n*/\n\n//  The following four setState invocations are equivalent:\nsetState( 'user', { id: 69 } );\nsetState( [ 'user' ], { id: 69 } );\nsetState({ keys: 'user', value: { id: 69 } });\nsetState({ keys [ 'user' ], value: { id: 69 } });\n\n//  The following two setState invocations are equivalent:\n//  (these invocations involve setting multiple values at once)\nsetState(\n\n    [ 'user', 'name' ], 'Jar Jar Binks',\n    'user', { id: 69 },\n    [ 'user', 'game' ], 'React state library author'\n);\nsetState(\n\n    {\n        keys: [ 'user', 'name' ],  \n        value: 'Jar Jar Binks'\n    },\n    {\n        keys: [ 'user' ],  \n        value: { id: 69 }\n    },\n    {\n        keys: [ 'user', 'game' ],  \n        value: 'React state library author'\n    }\n);\n```\n\n\n### Object Form for Initial State\n\nIn [Step 1](#step-1-install-reduxx-and-set-your-initial-global-state), we set up our initial state with an array of\nobjects that each have a `keys` and a `value` property. We can alternatively set up our initial state with an object.\nThis can be more suitable for ReduxX apps with a larger number of state keys because it easily allows you to organize\nyour initial state in a modular way (because it easily allows you to put sections of your initial state in different files if you want).\n\nThe code below shows you how to use the *Object Form for Initial State* to set the same initial state as in [Step 1](#step-1-install-reduxx-and-set-your-initial-global-state):\n\n```.js\nimport ReduxX, {\n\n    /*\n        General Use Case:\n            use the ReduxX VALUE key to set the initial state value\n            for the specified key\n    */\n    VALUE,\n\n    /*\n        Common/Simple Use Case:\n            alternatively use the ReduxX special \"v\" function\n            to specify the initial state value\n            for simple ReduxX initial state object configurations\n    */\n    v,\n\n} from 'react-state-management';\n\n\nexport const {\n\n    setUpReduxX,\n    setState,\n    getState,\n\n    /* Optional Exports: */\n    // resetReduxX,\n    // getGlobalUseState,\n    // oldeFashionedStateManagement\n\n} = ReduxX({\n\n    initialState: {\n\n        monkey: {\n\n            [VALUE]: { name: 'Curious George', bff: 'Donkey Kong' },\n\n            favoriteFood: v( 'banana' ),\n\n            height: {\n\n                [VALUE]: '69cm'\n            }\n        },\n\n        hippo: {\n\n            status: {\n\n                mood: v( 'hungry' )\n            }\n        }\n    }\n});\n```\n\n\n### Reset to Initial State\n\nTo reset your app's ReduxX state to the initial state\nspecified in [Step 1](#step-1-install-reduxx-and-set-your-initial-global-state),\nsimply execute the `resetReduxX` function as follows:\n\n```.js\nimport { createElement as e } from 'react';\n\nimport { resetReduxX } from '/*path to reduxX.js file, the file created in Step 1*/';\n\n\nexport default () =\u003e e( 'div', { onClick: resetReduxX } );\n```\n\u003e **Note:** the commented out `resetReduxX` function in\n[Step 1](#step-1-install-reduxx-and-set-your-initial-global-state) \nmust be uncommented so that it's exported🦖\n\nYou can also specify only certain keys to be reset using the optional\n`listOfKeysToExclude` and `listOfKeysToInclude` input values:\n```.js\n\nresetReduxX({\n\n    listOfKeysToExclude: [\n        [ 'monkey', 'favoriteFood' ],\n        [ 'hippo', 'status', 'mood' ]\n    ]\n});\n\n// or\n\nresetReduxX({\n\n    listOfKeysToInclude: [\n        [ 'monkey', 'favoriteFood' ],\n        [ 'hippo', 'status', 'mood' ]\n    ]\n});\n```\n### Olde Fashioned State Management and Global Use State\nYou can use the `oldeFashionedStateManagement`\nsystem to manually adjust your\nReduxX initialized state. \n\nYou can also access and alter the global state manually\nusing `getGlobalUseState()` to get the most parent component's `useState`\nfunction:\n\n```.js\n// some other module\n\nimport { createElement as e } from 'react';\n\nimport { oldeFashionedStateManagement, getGlobalUseState } from '/*path to reduxX.js file, the file created in Step 1*/';\n\n/*\n    Note:\n        the commented out `oldeFashionedStateManagement` object in Step 1\n        must be uncommented so that it's exported🦕\n        same with the commented out `getGlobalUseState` function🦖\n*/\n\nconst handleClick = ({ setCount }) =\u003e {\n\n    setCount( '🐒🍌' );\n\n    /*\n       Olde Fashioned State Setting and State Getting:\n    */\n    const {\n\n        stateKeyMapper,\n        KEY,\n        getStateKeyToStateTools\n\n    } = oldeFashionedStateManagement;\n\n    /*\n        NOTE:\n            the following assumes the state has been set up\n            like how it was in the first section\n    */\n    const stateKey = stateKeyMapper.monkey.favoriteFood[ KEY ];\n\n    const stateKeyToStateTools = getStateKeyToStateTools();\n\n    const stateTools = stateKeyToStateTools[ stateKey ];\n\n    const { stateValue, stateSetter } = stateTools;\n\n    console.log( stateValue );\n    // will log 'banana'\n\n    stateSetter( 'apple' );\n    /*\n        sets the state value for the [ 'monkey', 'favoriteFood' ]\n        state keys to be 'apple'\n        \n        this is the state setter function\n        that's returned by React.useState( ... ) \n        (the one associated with that state value)\n    */\n};\n\n\nconst div = () =\u003e {\n\n    /*\n       State Setting and State Getting Using Global Use State:\n    */\n    const globalUseState = getGlobalUseState();\n\n    const [ count, setCount ] = globalUseState( 1 );\n\n    console.log( count );\n    // will log 1\n\n    return e( 'div', { onClick: () =\u003e handleClick({ setCount }) } );\n};\n```\n\n### Multiple ReduxXs\nIt should be noted that you can have multiple ReduxX\ninstances. This could be useful if you have a larger app.\nYour file folder structure could look something like this:\n```\n/\n|\n|\n/LargeAppComponentA\n    reduxX.js // file set up in step 1\n    main.js\n    ...\n|\n|\n/LargeAppComponentB\n    reduxX.js // another file for this large component set up in step 1\n    main.js\n    ...\n|\n|\n...\n```\n\nYour ReduxX, your way!🦑","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitcoin-api%2Freact-state-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitcoin-api%2Freact-state-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitcoin-api%2Freact-state-management/lists"}