npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@justin/react-redux-firebase

v1.4.4

Published

Redux integration for Firebase. Comes with a Higher Order Component for use with React.

Downloads

6

Readme

react-redux-firebase

NPM version NPM downloads Quality Code Coverage Code Style License Build Status Dependency Status Backers on Open Collective

Gitter

Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React.

Demo

The Material Example is deployed to demo.react-redux-firebase.com.

Features

  • Integrated into redux
  • Support for updating and nested props
  • Population capability (similar to mongoose's populate or SQL's JOIN)
  • Out of the box support for authentication (with auto load user profile)
  • Firebase Storage Support
  • Support small data ( using value ) or large datasets ( using child_added, child_removed, child_changed )
  • queries support ( orderByChild, orderByKey, orderByValue, orderByPriority, limitToLast, limitToFirst, startAt, endAt, equalTo right now )
  • Automatic binding/unbinding
  • Declarative decorator syntax for React components
  • Tons of integrations including redux-thunk and redux-observable
  • Action Types and other Constants exported for external use (such as in redux-observable)
  • Firebase v3+ support
  • Server Side Rendering Support
  • react-native support using native modules or web sdk

Install

npm install --save react-redux-firebase

Other Versions

The above install command will install the @latest tag. You may also use the following tags when installing to get different versions:

@canary - Most possible up to date code. Currently points to active progress with v2.0.0-* pre-releases. Warning: Syntax is different than current stable version.

Other versions docs are available using the dropdown on the above docs link. For quick access:

Note: Be careful using not @latest versions. Please report any issues you encounter, and try to keep an eye on the releases page for relevant release info.

Use

NOTE: If you are just starting a new project, you might want to use v2.0.0 has an even easier syntax. For clarity on the transition, view the v1 -> v2 migration guide

Include reactReduxFirebase in your store compose function and firebaseStateReducer in your reducers:

import { createStore, combineReducers, compose } from 'redux'
import { reactReduxFirebase, firebaseStateReducer } from 'react-redux-firebase'

// Add Firebase to reducers
const rootReducer = combineReducers({
  firebase: firebaseStateReducer
})

// Firebase config
const config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>'
}

// Add redux Firebase to compose
const createStoreWithFirebase = compose(
  reactReduxFirebase(config, { userProfile: 'users' }),
)(createStore)

// Create store with reducers and initial state
const store = createStoreWithFirebase(rootReducer, initialState)

In components:

import React, { Component } from 'react'
import PropTypes from 'prop-types' // can also come from react if react <= 15.4.0
import { connect } from 'react-redux'
import { compose } from 'redux'
import {
  firebaseConnect,
  isLoaded,
  isEmpty,
  dataToJS,
  pathToJS
} from 'react-redux-firebase'

class Todos extends Component {
  static propTypes = {
    todos: PropTypes.object,
    auth: PropTypes.object,
    firebase: PropTypes.object
  }

  addTodo = () => {
    const { newTodo } = this.refs
    return this.props.firebase
      .push('/todos', { text: newTodo.value, done: false })
      .then(() => {
        newTodo.value = ''
        console.log('Todo Created!')
      })
      .catch((err) => {
        console.log('Error creating todo:', err) // error is also set to authError
      })
  }

  render() {
    const { todos } = this.props;

    // Build Todos list if todos exist and are loaded
    const todosList = !isLoaded(todos)
      ? 'Loading'
      : isEmpty(todos)
        ? 'Todo list is empty'
        : Object.keys(todos).map(
            (key, id) => (
              <TodoItem key={key} id={id} todo={todos[key]}/>
            )
          )

    return (
      <div>
        <h1>Todos</h1>
        <ul>
          {todosList}
        </ul>
        <input type="text" ref="newTodo" />
        <button onClick={this.handleAdd}>
          Add
        </button>
      </div>
    )
  }
}

export default compose(
  firebaseConnect([
    'todos' // { path: 'todos' } // object notation
  ]),
  connect(
    ({ firebase } }) => ({ // state.firebase
      todos: dataToJS(firebase, 'todos'), // in v2 todos: firebase.data.todos
      auth: pathToJS(firebase, 'auth') // in v2 todos: firebase.auth
    })
  )
)(Todos)

Alternatively, if you choose to use decorators:

@firebaseConnect([
  'todos' // { path: 'todos' } // object notation
])
@connect(
  ({ firebase }) => ({
    todos: dataToJS(firebase, 'todos'), // in v2 todos: firebase.data.todos
    auth: pathToJS(firebase, 'auth') // in v2 todos: firebase.auth
  })
)
export default class Todos extends Component {

}

Decorators

Though they are optional, it is highly recommended that you use decorators with this library. The Simple Example shows implementation without decorators, while the Decorators Example shows the same application with decorators implemented.

A side by side comparison using react-redux's connect function/HOC is the best way to illustrate the difference:

Without Decorators

class SomeComponent extends Component {

}
export default connect()(SomeComponent)

vs.

With Decorators

@connect()
export default class SomeComponent extends Component {

}

In order to enable this functionality, you will most likely need to install a plugin (depending on your build setup). For Webpack and Babel, you will need to make sure you have installed and enabled babel-plugin-transform-decorators-legacy by doing the following:

  1. run npm i --save-dev babel-plugin-transform-decorators-legacy
  2. Add the following line to your .babelrc:
{
  "plugins": ["transform-decorators-legacy"]
}

Docs

See full documentation at react-redux-firebase.com

Examples

Examples folder is broken into two categories complete and snippets. /complete contains full applications that can be run as is, while /snippets contains small amounts of code to show functionality (dev tools and deps not included).

State Based Query Snippet

Snippet showing querying based on data in redux state. One of the most common examples of this is querying based on the current users auth UID.

Decorators Snippet

Snippet showing how to use decorators to simplify connect functions (redux's connect and react-redux-firebase's firebaseConnect)

Simple App Example

A simple example that was created using create-react-app's. Shows a list of todo items and allows you to add to them.

Material App Example

An example that user Material UI built on top of the output of create-react-app's eject command. Shows a list of todo items and allows you to add to them. This is what is deployed to redux-firebasev3.firebaseapp.com.

Discussion

Join us on the redux-firebase gitter.

Integrations

View docs for recipes on integrations with:

Starting A Project

Generator

generator-react-firebase is a yeoman generator uses react-redux-firebase when opting to include redux.

Complete Examples

The examples folder contains full applications that can be copied/adapted and used as a new project.

FAQ

  1. How is this different than redux-react-firebase?

This library was actually originally forked from redux-react-firebase, but adds extended functionality such as:

Well why not combine?

I have been talking to the author of redux-react-firebase about combining, but we are not sure that the users of both want that at this point. Join us on the redux-firebase gitter if you haven't already since a ton of this type of discussion goes on there.

  1. Why use redux if I have Firebase to store state?

This isn't a super quick answer, so I wrote up a medium article to explain

  1. Where can I find some examples?
  1. How does connect relate to firebaseConnect?

data flow

  1. How do I help?
  • Join the conversion on gitter
  • Post Issues
  • Create Pull Requests

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏