szaranger / firebase-saga Goto Github PK
View Code? Open in Web Editor NEWA library for connecting redux-saga middleware to Firebase.
A library for connecting redux-saga middleware to Firebase.
Does Firebase sync work?
Thanks for putting this together. Working on a large project using mxstbr/react-boilerplate as a starter and just decided to move to Firebase.
I used the sample code in a saga.
import { take, takeEvery, call, fork, cancel, put } from 'redux-saga/effects';
import { LOCATION_CHANGE } from 'react-router-redux';
import { GET_DOCUMENTS } from './constants';
import { getDocumentsSuccess, getDocumentsError } from './actions';
import * as firebaseRef from 'firebase-saga';
export function* getDocuments() {
debugger;
const documents = yield call(firebaseRef.get, 'documents');
if (!documents.err) {
yield put(getDocumentsSuccess(documents.data.results));
} else {
yield put(getDocumentsError(documents.err));
}
}
export function* setWatcher() {
while (yield take(GET_DOCUMENTS)) {
yield call(getDocuments);
}
}
export function* dashboardSaga() {
const watcher = yield fork(setWatcher);
yield take(LOCATION_CHANGE);
yield cancel(watcher);
}
export default [
dashboardSaga,
];
The saga errors out and says that firebaseRef has not been defined.
Here's a screenshot
yield fork(sync, path, {
[CHILD_ADDED]: actions.syncNotificationAdded,
[CHILD_REMOVED]: actions.syncNotificationDeleted,
}, 1);
If I delete a notification or try to add one it calls both seemingly in a random order which causes problems. If I remove the depth specifier it works 100% as expected.
Currently push method only returns error.
I don't know if anyone else need the key after creating data.
Would it be a good idea to return key if there is no error?
export function* push(path, fn) {
const key = yield call(newKey, path);
const payload = yield call(fn, key);
const opts = newOpts('error');
const ref = firebase.database().ref(path);
const [ _, { error } ] = yield [
call([ref, ref.push], payload, opts.handler),
take(opts)
];
if (error === undefined) {
return key;
}
return error;
}
thank you.
Dependabot couldn't parse the package.json found at /package.json
.
You can mention @dependabot in the comments below to contact the Dependabot team.
The firebase saga push method, returns a key, however, it returns a key different to the one created on Firebase. I
ORIGINAL
export function* push(path, fn, getKey) {
const key = yield call(newKey, path);
const payload = yield call(fn, key);
const opts = newOpts('error', 'key');
const ref = firebase.database().ref(path);
const [_, { error }] = yield [call([ref, ref.push], payload, opts.handler), take(opts)];
console.log(_, 'METHOD');
console.log(error, 'ERROR');
// console.log(key, 'KEY');
if (getKey && error == undefined) {
return key;
}
return error;
}
Hi,
I know this is a dupe but I found the previous ticket answer not sufficient so I'm checking again here:
There is no documentation on how your library gets ahold of the firebase
reference it uses (e.g. in src/index.js) without loading any context or module.
Is it absolutely necessary to make firebase globally available?
Hi, there appears to be a minor issue in the Blog example that threw me when I was playing with it:
This does not look correct:
export const POST_CREATED = 'POST_RECEIVED';
here:
https://github.com/szaranger/firebase-saga/blob/master/examples/blog/src/actions/index.js#L11
(otherwise, thanks a lot, it has helped me a lot :)
I am using this lib in a Chrome extension, where I've so far been unable to figure out how to make firebase
globally available (i.e., there's no index.html <script>
method)
Is it possible to build this library such that it will run import firebase from 'firebase'
if it can't find the firebase
object?
I know it's not as simple as an if/then
, but I suspect there has to be a reasonable way short of forking the project.
Hi,
i want use firebase-saga with next-js but i have this error on startup:
ReferenceError: regeneratorRuntime is not defined
at Object.defineProperty.value (../node_modules/firebase-saga/dist/ReactProxy.js:78:79)
Thanks for this, a real life saver.
I'd like use Firebases push
method, I took a look at your create
method but couldn't make much sense on how to use it. Could you give an example?
Cheers!
using the create
saga & wondering about the source code here (which is also the same source code for push?):
/**
* Saves new data to the database with `set()`
*
* @param path
* @param fn
* @example
* import { create } from 'firebase-saga';
*
* yield call(create, 'posts', () => ({
* [`posts/1234`]: {
* title: 'My Second Post',
* body: 'Second post details',
* timestamp: +new Date
* }
* })
*);
*/
export function* create(path, fn) {
const key = yield call(newKey, path);
const payload = yield call(fn, key);
const opts = newOpts('error');
const ref = firebase.database().ref();
const [_, { error }] = yield [
call([ref, ref.update], payload, opts.handler),
take(opts)
];
return error;
}
Why does the API require declaring 'posts' as the 2nd arg, and 'posts' in the prop name of the anon set function?
two questions on this code:
function* runSync(ref, eventType, actionCreator) {
const opts = newOpts();
yield call([ref, ref.on], eventType, opts.handler);
while (true) {
const { data } = yield take(opts);
yield put(actionCreator({ key: data.key, value: data.val() }));
}
}
/**
* Gets fired every time a child added, remove, changed, or moved
*
* @param path
* @param mapEventToAction
* @param limit
* @example
* import { sync, CHILD_ADDED, CHILD_REMOVED } from 'firebase-saga';
*
*function* syncPosts() {
* yield fork(sync, 'posts', {
* [CHILD_ADDED]: actions.syncPostAdded,
* [CHILD_REMOVED]: actions.syncPostRemoved
* });
*}
*/
export function* sync(path, mapEventToAction = {}, limit = 20) {
const ref = firebase.database().ref(path).limitToLast(limit);
for (let type of EVENT_TYPES) {
const action = mapEventToAction[type];
if (typeof action === 'function') {
yield fork(runSync, ref, type, action);
}
}
}
limit
? i would assume the default use case would be no limit. would this be more general?export function* sync(path, mapEventToAction = {}, limit = 20) {
const ref = typeof limit === 'number' ?
firebase.database().ref(path).limitToLast(limit)
: firebase.database().ref(path)
// ...
const EVENT_TYPES = ['child_added', 'child_removed'];
is that a bug or is it meant to only cover add/remove?
i can submit prs for this stuff, just let me know !
I'm getting this error
ReferenceError: firebase is not defined
at sync$ (webpack:///./~/firebase-saga/dist/ReactProxy.js?:446:18)
...
It is referring to the sync method. I don't see any import of the firebase tool in the code with the functions.
These are my installed versions:
Are there any special requirements to use firebase-saga?
Currently queries to firebase cannot be filtered with firebase-saga.
It would be nice to have a way to access the query interface https://firebase.google.com/docs/reference/js/firebase.database.Query
Hi,
i have this sagas:
import { call, put, takeLatest, takeEvery, select } from 'redux-saga/effects';
import { getAll, remove } from 'firebase-saga';
import {
POSITIONS_GET_REQUEST,
POSITION_DEL_REQUEST,
} from '../actions/actionTypes';
import * as actions from '../actions/positions';
import { getUid } from '../selectors';
function* getPositions() {
try {
const userId = yield select(getUid);
const response = yield call(getAll, `positions/${userId}`);
yield put(actions.getPositionsReceived(response || {}));
} catch (error) {
yield put(actions.getPositionsFailed(error));
}
}
function* removePosition(action) {
try {
const userId = yield select(getUid);
yield call(remove, `positions/${userId}`, action.id);
yield put(actions.removePositionSuccess(action.id));
} catch (error) {
yield put(actions.removePositionFailed(error));
}
}
export default function* myPositions() {
yield takeLatest(POSITIONS_GET_REQUEST, getPositions);
yield takeEvery(POSITION_DEL_REQUEST, removePosition);
}
It works but i receive an error when dispatch the action POSITION_DEL_REQUEST
:
[...effects] has been deprecated in favor of all([...effects])
I'm trying to get your blog demo working, but fetch posts is never called. I noticed the FETCH_POSTS is not in the reducer and I'm wondering if that is the issue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.