1. Initial setup

Setting up the reducer

The first thing you have to do is add the firebase-sync reducer to your rootReducer.

// ./redux/reducers/rootReducer.js

import { combineReducers } from 'redux';
import { getFirebaseSyncReducer } from 'firebase-sync';
  
const rootReducer = combineReducers({
  firebase: getFirebaseSyncReducer()
});

Setting up the component and utilities

Then you must setup the firebase-sync component, selector and mapState utils. These are the stuff you will actually use throughout your app.

// ./lib/FirebaseSync.js

import store from './my-redux-store';
import firebase from '/my-initialized-firebase-app';
import buildFirebaseSync from 'firebase-sync';

// this is the reducer name you have used in your root reducer.
const reducerName = 'firebase';

const {
  FirebaseSync,
  firebaseSyncConnect
} = buildFirebaseSync({
  firebase,
  store,
  reducerName
});

export { FirebaseSync, firebaseSyncConnect };

Working with Immutable.js

Working with a immutable store is basically the same thing. Just follow these steps and everything will work just the same.

IMPORTANT: Both the firebaseSyncSelector and the firebaseSyncMapState utils returns plain javascript data, even if working with immutable states. Everything will be saved as immutable objects but when fetching the items they will be turned to plain javascript items.

1. First you pass in an empty Map as your reducer initial state.

// ./redux/reducers/rootReducer.js

import { combineReducers } from 'redux';
import { getFirebaseSyncReducer } from 'firebase-sync';
import { Map } from 'immutable';
  
combineReducers({
  firebase: getFirebaseSyncReducer(Map())
})

2. Then, when creating your FirebaseSync component, you define the onPostProcess prop in your defaultProps object. This way every item retrieved from the firebase database is turned into an immutable object before they are saved in the redux state.

// ./lib/FirebaseSync.js

import store from './my-redux-store';
import firebase from '/my-initialized-firebase-app';
import buildFirebaseSync from 'firebase-sync';

import { fromJS } from 'immutable';

const reducerName = 'firebase';

const {
  FirebaseSync,
  firebaseSyncConnect
} = buildFirebaseSync({
  firebase,
  store,
  reducerName,
  defaultProps: {
    onPostProcessItem: fromJS
  }
});

export { FirebaseSync, firebaseSyncConnect };