Automatically

firebaseConnect is a Higher Order Component that attaches listeners to Firebase based on provided config when the component is mounting, and removes them when it unmounts. firebaseConnect accepts an array of paths for which to create queries. When creating listeners, it is possible to modify the query with any of Firebase's included query methods.

The results of the queries created by firebaseConnect are written into redux state under the path of the query for both state.firebase.ordered and state.firebase.data. Below are examples using Firebase query config options as well as other options that are included (such as populates).

NOTE:
By default the results of queries are stored in redux under the path of the query. If you would like to change where the query results are stored in redux, use storeAs (more below).

Functional Approach Using Recompose

Using recompose is a nice way to keep your react code clean and functional. Useful Higher Order Components are offered such as branch (similar to the if statements from the last example) making for much cleaner construction of your own HOCs:

Example

Note:orderByChild, orderByValue, and orderByPriority enable automatic parsing of query params that follow them for convince. This means that the order of query params can affect which query is created. For example:

equalTo

Parsing

The following are internally parsed:

null

boolean

number

Note:orderByChild, orderByValue, and orderByPriority enable automatic parsing of query params that follow them for convince. This means the actual value will be parsed instead of the string containing the value. For example:

// Works since limitToFirst and startAt are parsed into numbers
queryParams:[`limitToFirst=${limitToFirst}`,`startAt=${startAt}`,'orderByValue'],// COULD CAUSE UNEXPECTED BEHAVIOR!!! Values passed to limitToFirst and startAt will remain as strings (i.e not parsed)
queryParams:['orderByValue',`limitToFirst=${limitToFirst}`,`startAt=${startAt}`],

If you would like to prevent or cause parsing of query params yourself, you can pass notParsed or parsed as a queryParam:

// limitToFirst and startAt remain as strings and are NOT automatically parsed
queryParams:['notParsed',`limitToFirst=${limitToFirst}`,`startAt=${startAt}`,'orderByValue'],// limitToFirst and startAt are parsed into numbers if possible
queryParams:['parsed',`limitToFirst=${limitToFirst}`,`startAt=${startAt}`,'orderByValue'],

Why?

Data is stored in redux under the path of the query for convenience. This means that two different queries to the same path (i.e. todos) will both place data into state.data.todos even if their query parameters are different.

Populate

Populate allows you to replace IDs within your data with other data from Firebase. This is very useful when trying to keep your data flat. Some would call it a join, but it was modeled after the mongo populate method.