{"id":20409098,"url":"https://github.com/tcorral/redux-time-machine","last_synced_at":"2026-05-21T16:41:09.372Z","repository":{"id":57351800,"uuid":"165525298","full_name":"tcorral/redux-time-machine","owner":"tcorral","description":"Convert your redux in a time machine. Basic to implement do-undo system in your application.","archived":false,"fork":false,"pushed_at":"2019-01-23T23:49:45.000Z","size":50,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T14:12:43.549Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/tcorral.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":null}},"created_at":"2019-01-13T16:03:37.000Z","updated_at":"2019-03-13T10:50:27.000Z","dependencies_parsed_at":"2022-08-29T11:00:27.409Z","dependency_job_id":null,"html_url":"https://github.com/tcorral/redux-time-machine","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/tcorral%2Fredux-time-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-time-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-time-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fredux-time-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tcorral","download_url":"https://codeload.github.com/tcorral/redux-time-machine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241955038,"owners_count":20048405,"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-15T05:39:35.359Z","updated_at":"2026-05-21T16:41:09.343Z","avatar_url":"https://github.com/tcorral.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReduxTimeMachine\n\n\u003e Redux Time Machine.\n\u003e Convert your redux in a time machine. Basic to implement do-undo system in your application.\n\n[![Build Status](https://travis-ci.org/tcorral/redux-time-machine.svg?branch=master)](https://travis-ci.org/tcorral/redux-time-machine)\n[![NPM Version](https://badge.fury.io/js/redux-time-machine.svg)](http://badge.fury.io/js/redux-time-machine)\n[![Chat on Gitter](https://badges.gitter.im/tcorral/redux-time-machine.svg)](https://gitter.im/tcorral/redux-time-machine?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## Installation\n\nReduxTimeMachine is available as an NPM package. You can install ReduxTimeMachine\nin your project's directory as usual:\n\n```bash\n$ npm install redux-time-machine --save\n```\n\n## Usage\n\n### ReduxTimeMachine\n-------\n### StateHubTimeMachine class api\nReduxTimeMachine provides you with a class to instanciate your time machine hub node.\n\u003e StateHubTimeMachine is a [Generic class](https://www.typescriptlang.org/docs/handbook/generics.html) and can be configured in advance so [TypeScript](https://www.typescriptlang.org) can provide the right information.\n\n#### Generics\nOn creating an instance of StateHub you need to provide the following Generics:\n\n1. State - Provide your state interface.\n2. Dispatchers - Provide your dispatchers interface.\n3. HubModel - Provide the Hub model interface.\n4. Result - Empty object where the node builder will store the used methods.\n\n```typescript\nimport { StateHubTimeMachine } from 'redux-time-machine';\n\nconst stateHubTimeMachine = new StateHubTimeMachine\u003cState, Dispatchers, Hub, {}\u003e();\n```\n\nFor more information [see StateHub Node API](https://github.com/tcorral/redux-hub#statehub-instance-api)\n\n\n### How ReduxTimeMachine works.\nReduxTimeMachine abstracts the way to store the past, present and future values.\n\n#### Present value\nThe present value is the current state value.\n\n#### Past values\nThe past value is an array where ReduxTimeMachine pushes every old state when present state value has changed.\n\n#### Future values\nThe future value is an array where ReduxTimeMachine pushes every state if the user navigated back to a past value.\n\n##### Initial Value\n```javascript\n{\n    test: 'test'\n}\n```\n##### On creating the ReduxTimeMachine node\n```javascript\n{\n    test: {\n        past: [],\n        present: 'test',\n        future: []\n    }\n}\n```\n\n### ReduxHub Node API\n[See ReduxHub Node API](https://github.com/tcorral/redux-hub#statehub-instance-api)\n\n#### dispatchers\nIn addition to the dispatchers created as a ReduxHub Node, ReduxTimeMachine has other predefined actions to navigate backwards and forwards over the state.\n\n\n##### undo\nWhen this dispatcher is executed:\n- The current state value is moved to the future.\n- The last state value in past is moved to the present value.\n\nState before dispatching **undo**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1', 'test2'],\n        present: 'test3',\n        future: []\n    }\n}\n```\n\nDispatching **undo**\n\n```javascript\nnode.dispatchers.undo();\n```\n\nState after dispatching **undo**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1'],\n        present: 'test2',\n        future: ['test3']\n    }\n}\n```\n\n##### redo\nWhen this dispatcher is executed:\n- The current state value is moved to the future.\n- The last state value in past is moved to the present value.\n\nState before dispatching **redo**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1'],\n        present: 'test2',\n        future: ['test3']\n    }\n}\n```\n\nDispatching **redo**\n\n```javascript\nnode.dispatchers.redo();\n```\n\nState after dispatching **redo**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1', 'test2'],\n        present: 'test3',\n        future: []\n    }\n}\n```\n\n##### jumpToPast\nThis dispatcher receives a number that is the index in the past array you want to move back to.\n\nWhen this dispatcher is executed:\n- The value stored in the past array position index passed to the dispatcher will be stored into the present value.\n- The previous values to the position index will remain in past array.\n- The values after position index will be added at the beginning of the future array.\n\n\nState before dispatching **jumpToPast**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1'],\n        present: 'test2',\n        future: ['test3']\n    }\n}\n```\n\nDispatching **jumpToPast**\n\n```javascript\nnode.dispatchers.jumpToPast(0);\n```\n\nState after dispatching **jumpToPast**\n\n```javascript\n{\n    test: {\n        past: [],\n        present: 'test',\n        future: ['test1', 'test2', 'test3']\n    }\n}\n```\n\n##### jumpToFuture\nThis dispatcher receives a number that is the index in the past array you want to move back to.\n\nWhen this dispatcher is executed:\n- The value stored in the future array position index passed to the dispatcher will be stored into the present value.\n- The previous values to the position index will be added to the past array.\n- The values after position index will remain in the future array.\n\nState before dispatching **jumpToFuture**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1'],\n        present: 'test2',\n        future: ['test3', 'test4']\n    }\n}\n```\n\nDispatching **jumpToFuture**\n\n```javascript\nnode.dispatchers.jumpToFuture(1);\n```\n\n\nState after dispatching **jumpToFuture**\n\n```javascript\n{\n    test: {\n        past: ['test', 'test1', 'test2', 'test3'],\n        present: 'test4',\n        future: []\n    }\n}\n```\n\n#### getState\nThis method returns present node state.\n\n```javascript\nnode.getState();\n```\n\n## API documentation\nAPI Documentation can be generated executing ```npm run docs```.\nThe documentation generated can be found inside the **docs** folder.\n\n## Build the source\nThis library has been written using [TypeScript](http://typescriptlang.org).\nIf you need to use it in your project but you are not working with TypeScript you can always to build the code using ```npm run build``` This command will *lint your code*, *run the tests* and *compile* to TypeScript.\n\n## Contributing\n\nThis project is maintained by a community of developers. Contributions are welcome and appreciated.\nYou can find ReduxTimeMachine on GitHub; feel free to start an issue or create a pull requests:\u003cbr\u003e\n[https://github.com/tcorral/redux-time-machine](https://github.com/tcorral/redux-time-machine)\n\nFor more information, read the [contribution guide](https://github.com/tcorral/redux-time-machine/blob/master/CONTRIBUTING.md).\n\n## License\n\nCopyright (c) 2019 [Tomas Corral](http://github.com/tcorral).\u003cbr\u003e\nCopyright (c) 2019 [ReduxTimeMachine Contributors](https://github.com/tcorral/redux-time-machine/graphs/contributors).\u003cbr\u003e\nLicensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcorral%2Fredux-time-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftcorral%2Fredux-time-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcorral%2Fredux-time-machine/lists"}