Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/szaranger/firebase-saga
A library for connecting redux-saga middleware to Firebase.
https://github.com/szaranger/firebase-saga
Last synced: about 1 month ago
JSON representation
A library for connecting redux-saga middleware to Firebase.
- Host: GitHub
- URL: https://github.com/szaranger/firebase-saga
- Owner: szaranger
- Created: 2016-07-09T11:42:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-29T20:03:22.000Z (almost 4 years ago)
- Last Synced: 2024-11-28T19:42:49.699Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 265 KB
- Stars: 58
- Watchers: 5
- Forks: 15
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# firebase-saga
A library for connecting `redux-saga` middleware to Firebase.
[](https://www.npmjs.com/package/firebase-saga)
[](https://www.npmjs.com/package/firebase-saga)
## Getting started
### Install
```
$ npm install firebase-saga --save
```
### API
Following functions are supported:
| Function | Description |
|------------------------------------------------------|----------------------------------------------------------------|
| * create(path: *, fn: *): * | Saves new data to the database with set() |
| * get(path: *, key: *): * | Fetches a record specified by the key from the database |
| * getAll(path: *): * | Fetches entire snapshot of the database |
| * push(path: *, fn: *, getkey: *): * | Generates a new child location using a unique key |
| * remove(path: *, key: *): * | Deletes a given child location using a unique key |
| * update(path: *, key: *, payload: *): * | Updates existing data in the database with update() |
| * updateAll(path: *, payload: *): * | Bulk updating existing data in the database with updateAll() |
| * sync(path: *, mapEventToAction: {}, limit: number) | Gets fired every time a child added, remove, changed, or moved | |
### Integrate Firebase with Sagas
The saga can be written like the following:
```js
import { takeEvery } from 'redux-saga';
import { call, put, fork } from 'redux-saga/effects';
import * as actions from '../actions';
import { getAll, get, create } from 'firebase-saga';
function* fetchPosts() {
try {
const posts = yield call(getAll, 'posts');
yield put(actions.postsReceived(posts));
}
catch (error) {
yield put(actions.fetchPostsFailed(error));
}
}
function* fetchPost() {
try {
const posts = yield call(get, 'posts', '1');
yield put(actions.postReceived(posts));
}
catch (error) {
yield put(actions.fetchPostFailed(error));
}
}
function* createPost() {
try {
const formData = yield select(getFormData);
yield call(create, 'posts', () => ({
[`posts/${formData.id}`]: {
title: formData.title,
body: formData.body,
timestamp: formData.timestamp
}
})
);
yield put(actions.postCreated());
}
catch (error) {
yield put(actions.postCreationFailed(error));
}
}
function* watchFetchPosts() {
yield* takeEvery(actions.FETCH_POSTS, fetchPosts);
}
function* watchFetchPost() {
yield* takeEvery(actions.FETCH_POST, fetchPost);
}
export default function* root() {
yield [
fork(watchFetchPosts),
fork(watchFetchPost)
]
}
```
### Add Firebase to your web app
If you are using CDN only, add the URL to the `index.html` file, and specify the **Firebase** config:
```html
// Initialize Firebase
var config = {
apiKey: '<YOUR API KEY>',
authDomain: '<YOUR APP NAME>.firebaseapp.com',
databaseURL: 'https://<YOUR APP NAME>.firebaseio.com',
storageBucket: '<YOUR APP NAME>.appspot.com'
};
firebase.initializeApp(config);
```
If you are using **Webpack** or **Browserify**, you can install the **firebase** node module and then import it into the root components.
```js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import createLogger from 'redux-logger';
import firebase from 'firebase';
import Blog from './containers/Blog';
import rootReducer from './reducers';
import rootSaga from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
window.devToolsExtension ? window.devToolsExtension() : f => f,
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);
firebase.initializeApp({
apiKey: '',
authDomain: '.firebaseapp.com',
databaseURL: 'https://.firebaseio.com',
storageBucket: '.appspot.com'
});
ReactDOM.render(
,
document.getElementById('root')
);
```
## Example
* [Sample Application](https://github.com/szaranger/firebase-saga/tree/master/examples/blog)
## Documentation
* [Overview](http://szaranger.github.io/firebase-saga/docs/manual/overview.html)
* [Installation](http://szaranger.github.io/firebase-saga/docs/manual/installation.html)
* [Tutorial](http://szaranger.github.io/firebase-saga/docs/manual/tutorial.html)
* [Usage](http://szaranger.github.io/firebase-saga/docs/manual/usage.html)
* [Configuration](http://szaranger.github.io/firebase-saga/docs/manual/configuration.html)
* [Example](http://szaranger.github.io/firebase-saga/docs/manual/example.html)
* [Reference](http://szaranger.github.io/firebase-saga/docs/identifiers.html)
* [FAQ](http://szaranger.github.io/firebase-saga/docs/manual/faq.html)
* [Changelog](http://szaranger.github.io/firebase-saga/docs/manual/changelog.html)