{"id":20078710,"url":"https://github.com/wpdas/rehoc","last_synced_at":"2025-05-05T22:32:58.450Z","repository":{"id":57352540,"uuid":"167782514","full_name":"wpdas/rehoc","owner":"wpdas","description":"A simple and easy way to manage the state while using ReactJS or React Native to build your applications.","archived":false,"fork":false,"pushed_at":"2020-04-10T16:40:16.000Z","size":943,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-25T02:02:16.468Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/wpdas.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":"2019-01-27T07:28:07.000Z","updated_at":"2020-04-10T16:40:11.000Z","dependencies_parsed_at":"2022-09-16T08:12:03.707Z","dependency_job_id":null,"html_url":"https://github.com/wpdas/rehoc","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Frehoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Frehoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Frehoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpdas%2Frehoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpdas","download_url":"https://codeload.github.com/wpdas/rehoc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224470885,"owners_count":17316710,"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":[],"created_at":"2024-11-13T15:16:17.932Z","updated_at":"2024-11-13T15:16:18.472Z","avatar_url":"https://github.com/wpdas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src='https://github.com/Wpdas/rehoc/raw/master/rehoc_logo_text.png' height='60' alt='Rehoc Logo' /\u003e\n\nRehoc is a tool to manage state container for React (JS and Native) apps. It was first used in a React project being built totally thinking in its ecosystem. The work behind the scenes happens using the new Context API provided by React.\n\nIt helps you write applications that behave consistently, you can work in a simple and easy way by using Rehoc once that it's clear how to use and change states. Rehoc also has friendly error messages so it's easy to identify when something is wrong with the states.\n\nIt is tiny (4kB, including dependencies).\n\n## Installation\n\nTo install the stable version:\n\n```sh\nnpm install --save rehoc\n```\n\nThis assumes you are using [npm](https://www.npmjs.com/) as your package manager.\n\n### Examples\n\n- [Basic App - CodeSandBox](https://codesandbox.io/s/rehoc-app-example-gw8br?fontsize=14)\n- [Using Multiples States - CodeSandBox](https://codesandbox.io/s/rehoc-using-multiples-states-wn1l9?fontsize=14)\n\n### How to use\n\nRehoc has these main methods to be used: `{ rehoc, setStates, connect, updateState, getStore }`.\n\n- `rehoc` - The main wrapper to start using this state management;\n- `setStates` - Used to register initial States;\n- `connect` - Used to connect Components to States (registeres before with `setStates`). You can connect the Component to one or more states. [See here](#multi-state);\n- `updateState` - Used to update content in some registered State;\n- `getStore` - Returns all States registered by `setStates` containing the most recent values.\n\nInitializing and consuming Rehoc resources is very simple, you can create your states separated from the Component. Below are examples of how to use it, you can also check our example app:\n\n```javascript\nconst userState = {\n  firstName: 'Wenderson',\n  lastName: 'Silva',\n  picture: 'https://url.com/image.jpg'\n};\n\nexport default userState;\n```\n\nThen, let's set our app up using Rehoc:\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\n//Rehoc\nimport { setStates, rehoc } from 'rehoc';\nimport userState from './states/user/state';\nimport locationState from './states/location/state';\n\n//Setting our states\nsetStates({\n  userState,\n  locationState\n});\n\n//Wrapping the Main App Component\nconst MyApp = rehoc(App);\n\nReactDOM.render(\u003cMyApp /\u003e, document.getElementById('root'));\n```\n\nYou must use `setStates({...})` to register all States the app will use. Be in mind that the name of states that you are passing to this method will be the name key to access them after. So, for example. Above we are registering `userState`, then, if I want to use this in some component, I need to call for the same name. You will see more about this in the next lines.\n\nNow, you are able to access (I mean, change and consume) the data provided by states in any component with no need to pass this through other components. You will see 2 methods to do this below:\n\n```jsx\nimport React from 'react';\nimport { connect } from 'rehoc';\nimport classes from './UserData.module.scss';\n\nconst userState = 'userState';\n\nclass UserData extends React.Component {\n  render() {\n    // Method One (version 1.3.0)\n    // const { userState } = this.props;\n    // const { firstName, lastName, picture } = userState;\n\n    // Method Two (version 1.4.0 on)\n    const { firstName, lastName, picture } = this.props;\n\n    return (\n      \u003cdiv className={classes.UserData}\u003e\n        \u003cspan\u003e\n          Name: {firstName} {lastName}\n        \u003c/span\u003e\n        \u003cimg src={picture} alt={firstName} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n// Method One (version 1.3.0)\n// export default connect(UserData);\n\n// Method Two (version 1.4.0 onwards)\nexport default connect(\n  UserData,\n  userState\n);\n```\n\nAs mentioned, if you are using method one, you must to call for the same name key registered within `setStates({...})`, then, you will access all its properties. In the other hand, if you are using method two, you need to inform `connect()` method what main state it should connect.\n\nWhen you choose to use method one (shown above), you need to get first the object state `userState`. This means that all the other States are accessible after `this.props`. So, we recommend you to use method two where you access only the State props related to this Component as shown above. But which way to use, it's up to you.\n\nWe can also change the state that we want by using `updateState(stateName, updatedObject)`:\n\n```javascript\nimport { updateState } from 'rehoc';\n\nonChangeFirstNameField = event =\u003e {\n  updateState('userState', { firstName: event.target.value });\n};\n```\n\nIf you want extract a specific state to send this to some database somewhere, you can use the `getStore()` method. It will return all the States containing the most recent values.\n\n```javascript\nimport { getStore } from 'rehoc';\n\n/**\n * Return:\n * { firstName: 'Wenderson', lastName: 'Silva', picture:'https...'}\n **/\nexport const getUserData = () =\u003e {\n  return getStore().userState;\n};\n```\n\nWe'd like to give you essential tips. These tips are to help you structure your project using Rehoc.\n\n## Well to know \u0026 Tips\n\n- The multi-state connection is supported from version 1.6.0 onwards. [See here](#multi-state);\n- Using multi-state connection to get specifics states properties is better than call `getStore()` method;\n- Use PureComponent or React.memo() as often as you can;\n- React Native is supported from version 1.2.0 onwards;\n- Avoid changing state properties that don't need to be changed;\n- It's not possible to set new properties into states after Rehoc starts. You're able only to change its values;\n- We strongly recommend to adopt this folder structure:\n\n```\nsrc/\n├── components/\n├── containers/\n└── states/\n    └── location/\n        ├── actions.js\n        ├── state.js\n    └── user/\n        ├── actions.js\n        ├── state.js\n\n```\n\nYou should set the initial properties and values for every State you need. And actions to do things that will affect the co-related States.\n\nLets suppose that the `userState` should be extracted in somewhere, for this, we can create an action that will expose user data:\n\n```javascript\n// action.js\nimport { getStore } from 'rehoc';\n\nexport const getUserData = () =\u003e {\n  return getStore().userState;\n};\n```\n\nOf course, you can use `getStore()` within some another component, but the best way to use this resource is into action files. Just to leave thing as much organized as we can.\n\n- Create a const called `stateName` containing the name of the state you want to connect to the Component. By this way, you can access easily the content related to this State and also change its values.\n\n```javascript\nimport React from 'react';\nimport { connect, updateState } from 'rehoc';\n\nconst userState = 'userState';\n\nclass UserData extends React.PureComponent {\n  onServerResponse(response) {\n    updateState(userState, { picture: response.data.picture });\n  }\n\n  render() {\n    const { firstName } = this.props;\n\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eUser Name: {firstName}\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default connect(\n  UserData,\n  userState\n);\n```\n\n### Multi-state\n\n- From version 1.6.0 onwards, it's possible to connect a component to multiple states at once. This is better than call `getStore()`. The getStore method needs to check and get all the states, even those that you don't need to use.\n\n```javascript\nimport React from 'react';\nimport { connect, updateState } from 'rehoc';\n\nconst userState = 'userState';\nconst addressState = 'addressState';\n\nclass UserData extends React.PureComponent {\n  onServerResponse(response) {\n    updateState(userState, { picture: response.data.picture });\n    updateState(addressState, { street: response.data.street });\n  }\n\n  render() {\n    // firstName from userState;\n    // street from addressState;\n    const { firstName, street } = this.props;\n\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eUser Name: {firstName}\u003c/p\u003e\n        \u003cp\u003eUser Street Name: {street}\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default connect(\n  UserData,\n  [stateName, addressState] // multi-state\n);\n```\n\n- Use actions to change or access data that are in another States. Let's suppose that I want to change the location value of some State called `locationState`, but we are into the user component. The user component is not connected to `locationState`. For reach this, we should create an action that will do this change for us. This actions, of course, should be into the `src/states/location` folder. See the example below:\n\n```javascript\nimport React from 'react';\nimport { connect } from 'rehoc';\nimport * as locationStateActions from './states/location/actions';\n\nconst stateName = 'userState';\n\nclass UserData extends React.Component {\n  // Change location\n  onSelectUSA() {\n    const newLocation = 'USA';\n    locationStateActions.setLocation(newLocation);\n  }\n}\n\nexport default connect(\n  UserData,\n  stateName\n);\n```\n\nAnd this would be our location action(.js file):\n\n```javascript\nimport { updateState } from 'rehoc';\n\nconst stateName = 'locationState';\n\n// Set new location\nexport const setLocation = newlocation =\u003e {\n  updateState(stateName, { location: newlocation });\n};\n```\n\n## Changelogs\n\n### v1.6.1\n\n- Bug fixes;\n\n### v1.6.0\n\n- Performance was improved;\n- `connect` method, now can connect multiples states to the same component. [See example here](#multi-state).\n\n### v1.5.0\n\n- Using the new ContextAPI;\n- `updateState` method, now has only two parameters `updateState(stateName: string, updatedObject: any)`. The third one called `shouldComponentUpdate` is not being used anymore and it was deprecated since version 1.5.0.\n\n## Logo\n\nYou can find the official logo [on GitHub](https://github.com/Wpdas/rehoc/raw/master/rehoc_logo.png).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpdas%2Frehoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpdas%2Frehoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpdas%2Frehoc/lists"}