RedFire

Redfire is a tiny library for Redux and Firebase. Use it to sync properties of your Redux store to Firebase Refs.

🚧🚧🚧 This is a work in progress. 🚧🚧🚧

Instalation

Just add it to your project with:

$ npm i -S redfire

Getting Started

Just follow these simple steps:

1. Import what you need to your project

   import { reducer, setDispatch, sync } from 'redfire';

2. Combine redfire's reducer with yours and set the dispatch function

   const store = Redux.createStore(
     Redux.combineReducers({
       /* Other reducers here */
       myFirebaseData: reducer
     },
   );
      
   setDispatch(store.dispatch);

3. Sync an id with a firebase Ref...

   sync('myId', FirebaseRef.child('myObject'));

Thats it. Your Redux State will look like this:

const state = {
  myFirebaseData: {
    myId: { /* Whatever you had in firebase */ } 
  }
};

Other Examples

There are other syncing functions to use

import { sync, get, syncChildren, unsync } from 'redfire';

This will keep id up to date with ref's value

sync('myId', FirebaseRef.child('myObject'));
// myId: { myFirstKey: 'myFirstValue', mySecondKey: 'mySecondValue' }

You can use subkeys in your id. Separate them with /

sync(`user/details/${uid}`, FirebaseRef.child('profiles').child(uid));
// users: { 
//   details: {
//     <uid>: /* ... */
//   }
// }

You can set asArray option to (surprise!) have data saved as array

sync('myArray', FirebaseRef.child('myObject'), {
  asArray: true
});
// myArray: [
//   { key: 'myFirstKey', value: 'myFirstValue' },
//   { key: 'mySecondKey', value: 'mySecondValue' },
// ]

Will bypass binding if this id is alredy in sync with a ref

sync('myObject', FirebaseRef.child('myObject'), {
  overwrite: false
});

Will set the value from ref but won't keep it in sync

get('myConfig', FirebaseRef.child('myConfig'));

Will keep in sync using child_added, child_removed and child_changed. Use for large objects.

syncChildren('myHugeObject', FirebaseRef.child('myHugeObject'));

You use query refs too

const searchRef = FirebaseRef
  .child("dinosaurs")
  .orderByChild("height")
  .startAt(3);

sync('myResults', searchRef);

FAQ

Is there a way to know when my data is loading?

Yes. If redfire[yourId] === undefined, it means we haven't received any results firebase. It is safe to show a preloader at this point because you cannot have undefined in firebase. If your data in firebase is empty, the value will be set to null.

Why are you using setDispatch?

To avoid having dependency on redux-thunk or having to send dispatch function on every call.

Then how do I change the state's data?

You don't. RedFire will take care of that. Make changes to update firebase directly witn ref.set(), ref.update(), ref.remove() and the changes will be reflected your store instantly, no delays. That's because of firebase optmistic nature. If the changes are not allowed on the server, the store will be reverted back to it's original state.