https://github.com/tiberiuc/redux-react-firebase

Use Firebase with React and Redux in ES6
https://github.com/tiberiuc/redux-react-firebase

Last synced: about 1 month ago
JSON representation

Use Firebase with React and Redux in ES6

• Host: GitHub
• URL: https://github.com/tiberiuc/redux-react-firebase
• Owner: tiberiuc
• License: mit
• Created: 2016-01-12T21:51:07.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-10-22T04:32:44.000Z (about 5 years ago)
• Last Synced: 2024-04-24T16:09:49.991Z (8 months ago)
• Language: JavaScript
• Size: 295 KB
• Stars: 248
• Watchers: 9
• Forks: 36
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# redux-react-firebase

Use Firebase with React and Redux in ES6

## Features

- Suport for Firebase v3 (for older Firebase version use [Branch 1.x](https://github.com/tiberiuc/redux-react-firebase/tree/1.x))

- Integrated into redux

- 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

- Support for nested props

- Out of the box support for authentication (with auto load user profile)

- Lots of helper functions

## Install

```

$ npm install --save redux-react-firebase

```

## Use

Include redux-react-firebase in your store

```javascript

import {createStore, combineReducers, compose} from 'redux'

import {reduxReactFirebase, firebaseStateReducer} from 'redux-react-firebase'

const rootReducer = combineReducers({

  firebase: firebaseStateReducer

})

const config = {

  apiKey: '',

  authDomain: '',

  databaseURL: '',

  storageBucket: ''

}

const createStoreWithFirebase = compose(

    reduxReactFirebase(config),

)(createStore)

store = createStoreWithFirebase(rootReducer, initialState)

```

In the components

```javascript

import React, {Component} from 'react'

import PropTypes from 'prop-types'

import {connect} from 'react-redux'

import {firebase, helpers} from 'redux-react-firebase'

const {isLoaded, isEmpty, dataToJS} = helpers

@firebase( [

  'todos'

])

@connect(

  ({firebase}) => ({

    todos: dataToJS(firebase, 'todos'),

  })

)

class Todos extends Component {

  render() {

    const {firebase, todos} = this.props;

    const todosList = (!isLoaded(todos)) ?

                          'Loading'

                        : (isEmpty(todos) ) ?

                              'Todo list is empty'

                            : _.map(todos, (todo, id) => () )

    return (

      


        
Todos

        


          {todosList}

        

        

        Add

      

    )

  }


}

```

## API

See [API](API.md)

## Example

You can see a complete example [here](example)

## Tests

Mocha.js is used as test runner. To run the tests, run

```

npm run test

```

## Contributors

- [Tiberiu Craciun](https://github.com/tiberiuc)

- [Rahav Lussto](https://github.com/RahavLussato)

- [Prescott Prue](https://github.com/prescottprue)