{"id":15285766,"url":"https://github.com/react-gx/gx","last_synced_at":"2025-04-13T02:37:53.429Z","repository":{"id":65912235,"uuid":"602053456","full_name":"react-gx/gx","owner":"react-gx","description":"A lightweight and powerful React State Management System like redux that helps you to manage your state globally inside your React, Nextjs and also React Native applications.","archived":false,"fork":false,"pushed_at":"2024-03-02T13:31:03.000Z","size":1232,"stargazers_count":25,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-13T02:37:06.423Z","etag":null,"topics":["actions","global-state","reactjs","signal","state","state-management"],"latest_commit_sha":null,"homepage":"","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/react-gx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-02-15T11:59:43.000Z","updated_at":"2024-12-16T20:43:51.000Z","dependencies_parsed_at":"2023-09-26T18:06:13.682Z","dependency_job_id":"468b4380-141c-433d-9473-053df76d6dc6","html_url":"https://github.com/react-gx/gx","commit_stats":{"total_commits":43,"total_committers":3,"mean_commits":"14.333333333333334","dds":0.06976744186046513,"last_synced_commit":"11ed9581f907a879de3451923d417967142b76ee"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gx%2Fgx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gx%2Fgx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gx%2Fgx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-gx%2Fgx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-gx","download_url":"https://codeload.github.com/react-gx/gx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248657854,"owners_count":21140843,"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":["actions","global-state","reactjs","signal","state","state-management"],"created_at":"2024-09-30T15:07:32.939Z","updated_at":"2025-04-13T02:37:53.404Z","avatar_url":"https://github.com/react-gx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GX - Global State Management for React Applications\n\n`React` and `React Native` Library for managing global state.\n\n[![npm version](https://badge.fury.io/js/%40dilane3%2Fgx.svg)](https://badge.fury.io/js/%40dilane3%2Fgx)\n[![npm downloads](https://img.shields.io/npm/dm/%40dilane3%2Fgx)](https://www.npmjs.com/package/@dilane3/gx)\n[![GitHub license](https://img.shields.io/github/license/react-gx/gx)](https://github.com/react-gx/gx/blob/main/LICENSE)\n\n![logo](https://lh4.googleusercontent.com/k2V9Oh-tfABeDjwovtMUqE-lt6cULH0c1EFgb-XNTFh1lt5DVGTGhl3Ty3fMF3xhCBY=w2400)\n\nThis library aims to provide you an `easy` and `fast` way to set up and manage the global state of your **`react`** application.\n\n## Documentation\n\nYou can read the entire [documentation](https://gx.dilane3.com) and see how to use this library perfectly.\n\nBut, If you want to start directly with the library continue reading this small documentation here.\n\n## Installation\n\nYou can use `npm` or `yarn` to install this library into your react application.\n\n### Using npm\n\n```bash\nnpm install @dilane3/gx\n```\n\n### Using yarn\n\n```bash\nyarn add @dilane3/gx\n```\n\n## Prerequisites\n\n```bash\nSince version `1.4.0` of `gx`, you can use it with `strict mode` enabled.\n```\n\nBut, if you are using a version below `1.4.0`, you have to disable `strict mode` in your react application.\n\n### Disabling strict mode on React\n\n**Before**\n\n```jsx\nimport React, { StrictMode } from \"react\";\n\nfunction App() {\n  return (\n    \u003cStrictMode\u003e\n      {\n        // Your application here\n      }\n    \u003c/StrictMode\u003e\n  );\n}\n\nexport default App;\n```\n\n**After**\n\n```jsx\nimport React, { Fragment } from \"react\";\n\nfunction App() {\n  return (\n    \u003cFragment\u003e\n      {\n        // Your application here\n      }\n    \u003c/Fragment\u003e\n  );\n}\n\nexport default App;\n```\n\n### Disabling strict mode on Next.js\n\nOpen the `next.config.js` file and add the following code.\n\n```js\nmodule.exports = {\n  reactStrictMode: false,\n};\n```\n\n## Definition of concepts\n\n**GX** comes with some new concepts like `signal`, `action`, and `store`.\n\n### 1. Signal\n\n**Signal** represent a specific state that your application has to manage.\nFor example, for managing users and products inside your ecommerce application you will have to create two separate signals called `usersSignal` and `productsSignal`.\n\nFor handle it, there is a special `createSignal` function for this case.\n\n### 2. Action\n\n**Actions** represent functions that act to the state and make it changing over the time.\n\nYou have to specify these `actions` when you create yours `signals`.\n\n```txt\nSince version `1.4.0` of `gx`, you can use `async` actions. \n```\n\nYou can read more about it on the [documentation](https://gx.dilane3.com/docs/guide/async-actions)\n\n### 3. Store\n\n**Store** is a collection of `signals`. We know that in an application, we can manage many state separately, so `gx` gives you the possibility to centralize all your state into a special place. The state becomes easier to manage like that.\n\nFor handle it, there is a special `createStore` function for this case, which takes an array of `signals`.\n\n## Usage\n\n### First step: Setting up the code structure.\n\nFor structuring your code very well you have to follow these steps.\n\n- Create a directory called `gx` or whatever you want inside the `src` directory\n- Inside the `gx` directory, create two others one called `signals` and `store`.\n- Inside the signals directory you will create files that will contains your state declaration with actions that act to this state. (**ie: counter.js**)\n- Inside the store directory, just create an index.js file. We will see how to fill it.\n\nHere is the result.\n\n![structure](https://lh3.googleusercontent.com/_z_JTStNFHyXTmjz4GrcphAN6BC_CeKYxN1zwyxWGC-ujpIcVTqthesXT6Lfe8b4t1M=w2400)\n\n### Second step: Creating your signals.\n\nInside the `signals` directory, create a file called `counter.js` for example.\n\n```js\nimport { createSignal } from \"@dilane3/gx\";\n\nconst counterSignal = createSignal({\n  name: \"counter\",\n  state: 0,\n  actions: {\n    increment: (state, payload) =\u003e {\n      return state + payload;\n    },\n\n    decrement: (state, payload) =\u003e {\n      return state - payload;\n    },\n  },\n});\n\nexport default counterSignal;\n```\n\nIf you want to use `async` actions, you can learn more about it on the [documentation](https://gx.dilane3.com/docs/guide/async-actions)\n\n### Third step: Creating your store.\n\nInside the `store` directory, create an `index.js` file.\n\n```js\nimport { createStore } from \"@dilane3/gx\";\nimport counterSignal from \"../signals/counter\";\n\nexport default createStore([counterSignal]);\n```\n\n### Fourth step: Using your store.\n\nInside your `App.js` file, import your store and wrap your application with the `GXProvider` component.\n\n```js\nimport React from \"react\";\nimport store from \"./gx/store\";\nimport GXProvider from \"@dilane3/gx\";\n\nfunction App() {\n  return (\n    \u003cGXProvider store={store}\u003e\n      {\n        // Your application here\n      }\n    \u003c/GXProvider\u003e\n  );\n}\n\nexport default App;\n```\n\n### Fifth step: Using your signals.\n\nCreate a component called `Counter` inside the Counter.js file. Then import two hooks from `gx` called `useSignal` and `useActions` like follow.\n\n```js\nimport React from \"react\";\nimport { useSignal, useActions } from \"@dilane3/gx\";\n\nfunction Counter() {\n  // State\n  const counter = useSignal(\"counter\");\n\n  // Actions\n  const { increment, decrement } = useActions(\"counter\");\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eCounter App\u003c/h1\u003e\n\n      \u003cp\u003eCount: {counter}\u003c/p\u003e\n\n      \u003cbutton onClick={() =\u003e increment(1)}\u003eIncrement\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e decrement(1)}\u003eDecrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Counter;\n```\n\nNote that the `useSignal` hook takes the name of the signal as a parameter and return the state contained inside that signal.\n\nThe `useAction` hook takes the name of the signal too and returns an object that contains all the actions of this signal.\n\nActually, if you click on the increment button, the counter will increase by one and if you click on the decrement button, the counter will decrease by one.\n\n### Sixth step: Adding operations to your signals.\n\nThis feature comes with the version `1.3.0` of `gx`. It allows you to add operations to your signals.\n**Operations** are functions that use your current state and apply some filters on it. They return the result of the operation without changing the state.\n\nFor example, if you want to know if the counter is even or odd, you can create an operation called `isEven` like follow.\n\n```js\nimport { createSignal } from \"@dilane3/gx\";\n\nconst counterSignal = createSignal({\n  name: \"counter\",\n  state: 0,\n  actions: {\n    increment: (state, payload) =\u003e {\n      return state + payload;\n    },\n\n    decrement: (state, payload) =\u003e {\n      return state - payload;\n    },\n  },\n\n  // Operations section\n  operations: {\n    isEven: (state) =\u003e {\n      return state % 2 === 0;\n    },\n  },\n});\n\nexport default counterSignal;\n```\n\nThen, you can use it inside your component like follow.\n\n```js\nimport React from \"react\";\nimport { useSignal, useActions, useOperations } from \"@dilane3/gx\";\n\nfunction Counter() {\n  // State\n  const counter = useSignal(\"counter\");\n\n  // Actions\n  const { increment, decrement } = useActions(\"counter\");\n\n  // Operations\n  const { isEven } = useOperations(\"counter\");\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eCounter App\u003c/h1\u003e\n\n      \u003cp\u003eCount: {counter}\u003c/p\u003e\n\n      \u003cp\u003eis even: {isEven() ? \"yes\" : \"no\"}\u003c/p\u003e\n\n      \u003cbutton onClick={() =\u003e increment(1)}\u003eIncrement\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e decrement(1)}\u003eDecrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Counter;\n```\n\n## API\n\n### `createSignal`\n\nThis function takes an object as a parameter and returns a signal.\n\nThe object must contain the following properties:\n\n| Properties | Type     | Description                                            |\n| ---------- | -------- | ------------------------------------------------------ |\n| `name`     | `string` | The name of the signal. It must be unique.             |\n| `state`    | `any`    | The initial state of the signal.                       |\n| `actions`  | `object` | An object that contains all the actions of the signal. |\n\nStructure of the `actions` object:\n\n```js\n{\n  actionName: (state, payload) =\u003e {\n    // Do something with the state and the payload\n    return state;\n  };\n}\n```\n\nAll actions must return the new state of the signal.\n\n### `createStore`\n\nThis function takes an array of signals as a parameter and returns a store.\n\n```js\nconst store = createStore([signal1, signal2, signal3]);\n```\n\n### `GXProvider`\n\nThis component takes a store as a parameter and wraps your application with it.\n\n```jsx\nconst App = () =\u003e (\n  \u003cGXProvider store={store}\u003e\n    {\n      // Your application here\n    }\n  \u003c/GXProvider\u003e\n);\n```\n\n### `useSignal`\n\nThis hook takes the name of the signal as a parameter and returns the state contained inside that signal.\n\n```js\nconst counter = useSignal(\"counter\");\n```\n\n### `useActions`\n\nThis hook takes the name of the signal as a the first parameter and returns an object that contains all the actions of this signal.\n\n```js\nconst { increment, decrement } = useActions(\"counter\");\n```\n\n### `useAction`\n\nThis hook takes the name of the signal as the first parameter and the name of the action as the second one and then return that action.\n\n```js\nconst increment = useAction(\"counter\", \"increment\");\n```\n\nSee more on the [documentation](https://gx.dilane3.com/docs/guide/hooks/useAction)\n\n## TypeScript Support\n\n`GX` support TypeScript, so that you can use it directly into your application.\n\nSee how to integrate it on the [documentation](https://gx.dilane3.com/docs/typescript) website\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Author\n\n- Github: [**@dilane3**](https://github.com/dilane3)\n- Twitter: [**@dilanekombou**](https://twitter.com/DilaneKombou)\n- LinkedIn: [**@dilanekombou**](https://www.linkedin.com/in/dilane-kombou-6824b2207/)\n- website: [**dilane3.com**](https://dilane3.com/)\n\n## Contributing\n\nContributions, issues and feature requests are welcome!\nSee the [Contributing Guide](./CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-gx%2Fgx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-gx%2Fgx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-gx%2Fgx/lists"}