Mobase.js: Firebase-MobX adapter (a no-painer)
Documentation: https://rasdaniil.gitbooks.io/mobase/content/
mobase helps you to create MobX-powered Firebase-syncronised reactive MobaseStores in a simple and intuitive manner.
It's based on a unidirectional data flow pattern. So the the only way to alternate data in the store is to write it to firebase. Because of the nature of Firebase changes will take effect immediately (don't have to wait until it syncs with the server)
MobaseStore has a MobX map as a collection of elements (items) at the core. It supports most of MobX maps' methods like values(), entries(), size, etc..
It's important that every item had it's own id (any unique field can be an id, see options.idField)
GETTING STARTED
npm install --save mobase
Let's say we expect to have our data in firebase structured as following:
/todos
-KdqjbX-oyvjM7ftb43K
id: "-KdqjbX-oyvjM7ftb43K"
isDone: false
subtasks
0: "Subtask #1"
1: "Subtask #2"
text: "This is my first todo"
-KdvJzu-bynbpyMa1fGl
-KdvRsT9-FeN4vVEGTj0
// and so on
There are a few expressive ways to define our store:
// don't forget to firebase.initializeApp(credentials) const todoStore = path: '/todos' database: firebase fields: id: observableref isDone: modifier: observableref default: '' subtasks: modifier: observableshallow default: text: observableref
Now let's use the store created in a reactive manner with React.
const App =
To add data:
const addTodo = { todoStore }
To modify existing item:
const completeTodo = { todoStore // don't forget to specify id of the object being updated } const addSubtask = { const subtasks = todosubtasks //new subtasks array todoStore } const todo = todoStore0 //getting the first todo from the store
To remove an item:
const removeTodo = { todoStore }