3. Pre processing objects

Sometimes we want to alter the object we're gonna actually use inside our components. It's really simple to do it with firebase-sync as we can process each object before they are saved on our state. You should also notice how we create a component that encapsulates our FirebaseSync object, this enables a lot of composition possibilities and is considered a good practice.

// ./containers/FirebaseSyncUser.js

import React from 'react'
import { FirebaseSync } from '../lib/FirebaseSync'

function processUser(user) {
  return {
    ...user,
    displayName: `${user.firstName} ${user.lastName}`
  };
}

const FirebaseSyncUser = ({ userId }) => (
  <FirebaseSync
    path=`users/${userId}`
    onProcessItem={processUser} />
)

export default FirebaseSyncUser

// ./containers/User.js

import React from 'react';
import FirebaseSyncUser from '../FirebaseSyncUser'
import { connect } from 'react-redux'
import get from 'lodash/get'

const User = (props) => (
  <div>
  
    <FirebaseSyncUser userId={props.userId} />
    
    {(props.user) && (
      <div>
        <h1>{user.displayName}</h1>
      </div>
    )}
  
  </div>
)

export default connect(
  (state, props) => ({
    user: get(state, ['firebase', 'user', props.userId])
  })
)(User)

Obs.: We are using lodash's get to fetch the item from our redux state. This can be simplified by using our firebaseSyncConnect util as shown in the previous guide.