ES6/7 Decorator alternative

I see in the example (https://github.com/tiberiuc/redux-react-firebase/blob/master/example/App.js)

@firebase()

and then later:

@firebase( [
  '/todos', // if list is too large you can use ['/todos']
])

I’m not sure why this happens twice, and what the decorator does exactly, and what the alternative would be with ES5.

Also, the comment // if list too large you can use ['/todos'] I don’t understand what this means, can you elaborate? (there is no difference in '/todos')

[prescottprue]

@TrySpace the simple example of redux-firebasev3 shows implementing without decorators where the decorators example (interface is the same as this library)

Simple comparison:

With Decorators

@firebase(['/todos'])
@connect(
  ({firebase}) => ({
    todos: dataToJS(firebase, '/todos'),
    profile: pathToJS(firebase, 'profile')
  })
)

Without Decorators

const fbWrappedComponent = firebase(['/todos'])(App)

export default connect(
  ({firebase}) => ({
    todos: dataToJS(firebase, 'todos'),
    profile: pathToJS(firebase, 'profile')
  })
)(fbWrappedComponent)

I bet that @tiberiuc will add a similar example showing this in the future (he is just now back around).

[tiberiuc]

first version

@firebase( [
  '/todos', 
])

it is the equivalent for firebase.ref.child('/todos').on('value', ..... ) that mean it will listen for value and each time a todo will change it will fetch the entire /todos tree as a single value. The problem is when you have a lot of todos, firebase have a limit of 10mb / node

while

@firebase( [
  ['/todos'], 
])

it is the equivalent for

firebase.ref.child('/todos').on('child_added', ..... )
firebase.ref.child('/todos').on('child_removed', ..... )
firebase.ref.child('/todos').on('child_changed', ..... )
firebase.ref.child('/todos').on('child_moved', ..... )

and it will fetch each todo item one by one and also listen for removed, changed, … events and is setting them into redux store one by one

the result of each version it is the same, the difference it is how it is fetching the results from firebase and of course when you have huge data ( more then 10mb ) then first version will just not work

let me know if you have any other questions