Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grahamtallen/mobx-undo-form
A form with undo-able actions. By unifying the entire application's observable state in a Global Store, you can revert the entire application's state using methods on the Global Store
https://github.com/grahamtallen/mobx-undo-form
mobx mobx-observable react react-native
Last synced: 24 days ago
JSON representation
A form with undo-able actions. By unifying the entire application's observable state in a Global Store, you can revert the entire application's state using methods on the Global Store
- Host: GitHub
- URL: https://github.com/grahamtallen/mobx-undo-form
- Owner: grahamtallen
- Created: 2017-02-07T21:28:15.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-02T07:16:11.000Z (almost 8 years ago)
- Last Synced: 2024-10-22T13:55:05.309Z (2 months ago)
- Topics: mobx, mobx-observable, react, react-native
- Language: JavaScript
- Homepage:
- Size: 4.71 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Native + Mobx Undo-able Form
A form with undo-able actions. By unifying the entire application's observable state in a Global Store, you can revert the entire application's state using methods on the Global Store
###Examples
---```javascript
// in GlobalStore.js
class GlobalStore {@observable substores = {};
constructor() {
// After this global store class is instatiated via the constructor function, map the substores to this object
this.substores = mapStores(subStores);var {UiStore, UndoStore} = this.substores; // you can even deconstruct the state immidiately after instantiation,
reaction(() => this.snapshot, this.pushSnapshotAndSave); // and bind reactions to the global actions below
reaction(() => UndoStore.snapshots.length > 1, (bool) => UiStore.displayUndo = bool); // or bind reactions to and from the substores
when(() => UiStore.loggedIn, this.displayUser); // this, referring to the GlobalStore and the methods bound to it
}
... // all other actions
resetState() {
let {UndoStore, UiStore, ColorStore} = this.substores;
let lastSnapshot = UndoStore.snapshots.length > 1 && UndoStore.snapshots[1];
if (lastSnapshot) {
UiStore.autoSaveDrafts = false;// here is where the entire application state is reset based on the last snapshot, see Snapshot.js
this.substores = resetSnapshot(lastSnapshot, this.substores);UndoStore.popSnapshot();
UiStore.autoSaveDrafts = true;
}
}
}
```