Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tcorral/redux-time-machine
Convert your redux in a time machine. Basic to implement do-undo system in your application.
https://github.com/tcorral/redux-time-machine
Last synced: 5 days ago
JSON representation
Convert your redux in a time machine. Basic to implement do-undo system in your application.
- Host: GitHub
- URL: https://github.com/tcorral/redux-time-machine
- Owner: tcorral
- License: mit
- Created: 2019-01-13T16:03:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-23T23:49:45.000Z (almost 6 years ago)
- Last Synced: 2024-09-21T23:47:57.046Z (about 2 months ago)
- Language: TypeScript
- Size: 48.8 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ReduxTimeMachine
> Redux Time Machine.
> Convert your redux in a time machine. Basic to implement do-undo system in your application.
[](https://travis-ci.org/tcorral/redux-time-machine)
[](http://badge.fury.io/js/redux-time-machine)
[](https://gitter.im/tcorral/redux-time-machine?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
## Installation
ReduxTimeMachine is available as an NPM package. You can install ReduxTimeMachine
in your project's directory as usual:
```bash
$ npm install redux-time-machine --save
```
## Usage
### ReduxTimeMachine
-------
### StateHubTimeMachine class api
ReduxTimeMachine provides you with a class to instanciate your time machine hub node.
> 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.
#### Generics
On creating an instance of StateHub you need to provide the following Generics:
1. State - Provide your state interface.
2. Dispatchers - Provide your dispatchers interface.
3. HubModel - Provide the Hub model interface.
4. Result - Empty object where the node builder will store the used methods.
```typescript
import { StateHubTimeMachine } from 'redux-time-machine';
const stateHubTimeMachine = new StateHubTimeMachine();
```
For more information [see StateHub Node API](https://github.com/tcorral/redux-hub#statehub-instance-api)
### How ReduxTimeMachine works.
ReduxTimeMachine abstracts the way to store the past, present and future values.
#### Present value
The present value is the current state value.
#### Past values
The past value is an array where ReduxTimeMachine pushes every old state when present state value has changed.
#### Future values
The future value is an array where ReduxTimeMachine pushes every state if the user navigated back to a past value.
##### Initial Value
```javascript
{
test: 'test'
}
```
##### On creating the ReduxTimeMachine node
```javascript
{
test: {
past: [],
present: 'test',
future: []
}
}
```
### ReduxHub Node API
[See ReduxHub Node API](https://github.com/tcorral/redux-hub#statehub-instance-api)
#### dispatchers
In addition to the dispatchers created as a ReduxHub Node, ReduxTimeMachine has other predefined actions to navigate backwards and forwards over the state.
##### undo
When this dispatcher is executed:
- The current state value is moved to the future.
- The last state value in past is moved to the present value.
State before dispatching **undo**
```javascript
{
test: {
past: ['test', 'test1', 'test2'],
present: 'test3',
future: []
}
}
```
Dispatching **undo**
```javascript
node.dispatchers.undo();
```
State after dispatching **undo**
```javascript
{
test: {
past: ['test', 'test1'],
present: 'test2',
future: ['test3']
}
}
```
##### redo
When this dispatcher is executed:
- The current state value is moved to the future.
- The last state value in past is moved to the present value.
State before dispatching **redo**
```javascript
{
test: {
past: ['test', 'test1'],
present: 'test2',
future: ['test3']
}
}
```
Dispatching **redo**
```javascript
node.dispatchers.redo();
```
State after dispatching **redo**
```javascript
{
test: {
past: ['test', 'test1', 'test2'],
present: 'test3',
future: []
}
}
```
##### jumpToPast
This dispatcher receives a number that is the index in the past array you want to move back to.
When this dispatcher is executed:
- The value stored in the past array position index passed to the dispatcher will be stored into the present value.
- The previous values to the position index will remain in past array.
- The values after position index will be added at the beginning of the future array.
State before dispatching **jumpToPast**
```javascript
{
test: {
past: ['test', 'test1'],
present: 'test2',
future: ['test3']
}
}
```
Dispatching **jumpToPast**
```javascript
node.dispatchers.jumpToPast(0);
```
State after dispatching **jumpToPast**
```javascript
{
test: {
past: [],
present: 'test',
future: ['test1', 'test2', 'test3']
}
}
```
##### jumpToFuture
This dispatcher receives a number that is the index in the past array you want to move back to.
When this dispatcher is executed:
- The value stored in the future array position index passed to the dispatcher will be stored into the present value.
- The previous values to the position index will be added to the past array.
- The values after position index will remain in the future array.
State before dispatching **jumpToFuture**
```javascript
{
test: {
past: ['test', 'test1'],
present: 'test2',
future: ['test3', 'test4']
}
}
```
Dispatching **jumpToFuture**
```javascript
node.dispatchers.jumpToFuture(1);
```
State after dispatching **jumpToFuture**
```javascript
{
test: {
past: ['test', 'test1', 'test2', 'test3'],
present: 'test4',
future: []
}
}
```
#### getState
This method returns present node state.
```javascript
node.getState();
```
## API documentation
API Documentation can be generated executing ```npm run docs```.
The documentation generated can be found inside the **docs** folder.
## Build the source
This library has been written using [TypeScript](http://typescriptlang.org).
If 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.
## Contributing
This project is maintained by a community of developers. Contributions are welcome and appreciated.
You can find ReduxTimeMachine on GitHub; feel free to start an issue or create a pull requests:
[https://github.com/tcorral/redux-time-machine](https://github.com/tcorral/redux-time-machine)
For more information, read the [contribution guide](https://github.com/tcorral/redux-time-machine/blob/master/CONTRIBUTING.md).
## License
Copyright (c) 2019 [Tomas Corral](http://github.com/tcorral).
Copyright (c) 2019 [ReduxTimeMachine Contributors](https://github.com/tcorral/redux-time-machine/graphs/contributors).
Licensed under the MIT License.