tiberiuc / redux-react-firebase Goto Github PK
View Code? Open in Web Editor NEWUse Firebase with React and Redux in ES6
License: MIT License
Use Firebase with React and Redux in ES6
License: MIT License
Hi Tiberiu,
The example uses configureStore
from the store
but it's not defined there.
import configureStore from './store'
const store = configureStore()
Can you post an example how to configure Firebase URL, since I am getting this error:
Uncaught Error: FIREBASE FATAL ERROR: Cannot parse Firebase url. Please use https://<YOUR FIREBASE>.firebaseio.com
Thanks!
I'm trying to test a component whose layout changes depending on whether a user is logged in. My Mocha tests looks like this:
import {Provider} from 'react-redux';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect.js'
import newStore from './store';
import MyComponent from './MyComponent.jsx';
describe('MyComponent', function() {
context('when the user is logged in', function() {
var component;
beforeEach(function() {
// initialize the Redux store
var store = newStore({ gameID: 'a001' });
// log a user in programmatically - but how to do it?
// render the component under test
component = TestUtils.renderIntoDocument(
<Provider store={store}>
<Game />
</Provider>
);
});
it("should show the user's name", function() {
var playerNameDisplay = TestUtils.findRenderedDOMComponentWithClass(
component, 'player-name'
);
expect(playerNameDisplay.textContent).to.be('My Name');
});
/* and all the rest of the tests... */
});
});
I'm not really sure how to log a user in during test setup. First I tried to just set the user profile by initializing the store with a profile in place:
beforeEach(function() {
// initialize the Redux store - with a profile set!
var store = newStore({ gameID: 'a001', firebase: { profile: { name: 'My Name' }}});
// render the component under test
component = TestUtils.renderIntoDocument(
<Provider store={store}>
<Game />
</Provider>
);
});
but when the component under test rendered, the profile data was gone. Looks like it gets reset.
Then I tried to find a way to call the createUser
and login
methods provided by redux-react-firebase
in the test setup, but couldn't figure out how to get a reference to the object that has those methods:
beforeEach(() => {
// initialize the Redux store
var store = newStore({ gameID: 'a001' });
// log a user in programmatically
var credentials = {
email: '[email protected]',
password: 'a'
};
var firebase = // but how to get a reference?
firebase.createUser(credentials, { name: 'My Name' });
firebase.login(credentials);
// render the component under test
component = TestUtils.renderIntoDocument(
<Provider store={store}>
<Game />
</Provider>
});
Is there a way to get a reference in my test setup to the object createUser
and login
are defined on? Or am I going about logging a user in all wrong? Any guidance would be very helpful, I'm stuck.
I got the following errors when trying to use with webpack. I tried using both noParse
as well as setting an alias to both the source folder and the build folder.
I was able to get it working by installing bluebird
and immutable
into my project, but it might be nice to make those become dependencies or be part of the docs somewhere.
How can I access the storage
using the redux-react-firebase
object? With the original firebase NPM works fine.
I'm trying like this: let imgRef = firebase.storage().child('posts/' + post.slug + '.jpg');
Thanks
I'm trying to switch google accounts but the persisted state is always stuck on the same account. The logout method does effectivle log out the the authed user but it does not clear the persisted state.
Firebase documentation ref:
https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=en-419
thanks in advance !
Currently, the reduxReactFirebase
call is very opinionated on how to use firebase
, it attaches itself to the store
as firebase
and, in addition, also attaches itself to the global firebase
module. That is bad style, and makes it entirely monolithic.
As explained in the official documentation, you can work against the database
of a specific app by simply storing the reference to the object from the return value of the initializeApp
call, and then call database()
on that, instead of calling it directly on the default firebase
object.
Looks like the store
is not being set correctly in the FirebaseConnect contextTypes (source/connect.js
Line 123). Getting this error:
Warning: FirebaseConnect: type specification of context `store` is invalid; the type checker function must return `null` or an `Error` but returned a function. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).
Expecting:
FirebaseConnect.contextTypes = {
store: PropTypes.object.isRequired
}
Instead of Line 123:
FirebaseConnect.contextTypes = {
store: function () {
return PropTypes.object.isRequired
}
}
Testing with [email protected]
Hi there,
I'm having some difficulties trying to make queries a bit more complex than the ones explained in the API docs and I was wondering if the library can handle those scenarios and perhaps I'm missing something.
My target is to request for all the files, subjects, levels and users
associated to a specific course
. At the moment, due to the querying difficulties, I have to download everything
and then use loops to find the right info. This is far from ideal, as the app will not perform well as it scales.
This is how my queries look like:
@connect(
(state, props) => ({
course: dataToJS(state.firebase, 'courses'),
levels: dataToJS(state.firebase, 'levels'),
subjects: dataToJS(state.firebase, 'subjects'),
users: dataToJS(state.firebase, 'users'),
files: dataToJS(state.firebase, 'files'),
userID: state.mainReducer.user ? state.mainReducer.user.uid : '',
//featuredImage: state.course.featuredImage ? state.course.featuredImage : '',
courseID: props.course ? props.course[Object.keys(props.course)[0]].code : '',
userData: dataToJS(state.firebase, `users/${state.mainReducer.user ? state.mainReducer.user.uid : ''}`),
})
)
@firebase(
props => ([
`courses#orderByChild=slug&equalTo=${props.params.slug}`,
'levels',
'subjects',
//`subjects#orderByKey&equalTo=${props.course ? props.course[Object.keys(props.course)[0]].subjects : ''}`,
'users',
'files',
//`files#orderByChild=featuredImage&equalTo=${props.featuredImage}`
`users/${props.userID}`
])
)
As you can see, I can get the user ID from my custom reducer, mainReducer
, which gets it from the authentication
module. That's fine, the problem I find is when I want to use a prop like props.course
(which receives the data from firebase) to make subsequent calls to firebase, i.e. to retrieve the files
or subjects
of that specific course ID. Is this possible at all? I don't seem to find anything that comes from firebase inside the state
and props
in the @connect
. The only props available there are the ones I set using my custom mainReducer
.
I though of setting the course
data in my mainReducer
so I could access it in the @connect
and use it to make other firebase requests, but it seems like an overkill to save something in the state tree that has already been saved...
I hope it does make sense. Thanks in advance for your time!
Hi guys -
First off great work - I'm finding the library to be super useful.
I do notice that you force values to ints here. When I to an orderByChild("something").equalTo("someString") is doesn't work - I mean the children are strings even though in some cases the strings do actually parse as ints. Anyway, I can take out the parseInt and things work as I expect them to. What do you think about an option to not coerce to int? Given that you're using query strings, maybe something like doNotParse=1??
@firebase((props) => {
return [
[`${props.userId}/friends`]
]
})
this code not working. "Invalid path"
I need child_remove listening
Will this work with redux dev tools and redux-react-router?
For some reason, equalTo
query arguments sometimes get parsed as integers, even if they are not integers, leading to troublesome side-effects.
I used orderByChild
in combination with equalTo
on user ids, sending me on a two-hour bug hunt where the query worked for some users and not work for others; only to find out that for this query combination, the equalTo
handler in actions.js, by default, parses their parameter as integer using parseInt
, like so:
case 'equalTo':
let equalToParam = !doNotParse ? parseInt(param[1]) || param[1] : param[1]
This sort of logic has multiple problems:
parseInt('11asfkvvjjjj--add')
actually returns 11
. That's right, parseInt
ain't a quitter; if it doesn't work for the whole thing, it settles for any number prefix in the string.0
: parseInt("0") || "0"
actually returns the string "0"
instead of number 0
.I propose a simple fix, borrowed from this StackOverflow discussion on integer string validation:
function isIntString(val) {
return val === "" + ~~val;
}
// ...
let equalToParam = (!doNotParse && isIntString(param[1])) ? parseInt(param[1]) : param[1];
It's not perfect but certainly a lot better. Maybe just working with numbers in general, rather than int only would be better?
PS: There are a few more questions related to the rationale behind this design decision:
You only assume that integers need parsing. What about floats or other sorts of special values that might have accidentally ended up string-encoded?
And also: why is doNotParse
not the default? Shouldn't special parsing behavior that might make your queries not behave the way they would when using vanilla firebase, be opt-in, rather than opt-out?
I follow all your setup and got firebase.intializeApp()
. Look like the app don't initialize.
My Store
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';
import { applyMiddleware, compose, createStore } from 'redux';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
import { reduxReactFirebase } from 'redux-react-firebase'
import promiseMiddleware from 'redux-promise-middleware';
import rootReducer from './reducers';
import Config from '../config';
const middleware = [
createLogger(),
thunk,
promiseMiddleware()
];
// Set var for all the middleware + redux chrome extension
const enhancers = compose(
applyMiddleware(...middleware),
window.devToolsExtension ? window.devToolsExtension() : f => f
);
const createStoreWithFirebase = compose(reduxReactFirebase(Config))(createStore);
const store = createStoreWithFirebase(rootReducer, {}, enhancers)
// Make the history work with browserHistory
export const history = syncHistoryWithStore(browserHistory, store);
// Make the hot reload work with Redux
if (module.hot) {
module.hot.accept('./reducers', () => {
const nextRootReducer = rootReducer;
store.replaceReducer(nextRootReducer);
});
}
export { store };
My Reducer
import { combineReducers, compose } from 'redux';
import { routerReducer } from 'react-router-redux';
import { reducer as formReducer } from 'redux-form'
import { firebaseStateReducer } from 'redux-react-firebase';
export default combineReducers({
routing: routerReducer,
form: formReducer,
firebase: firebaseStateReducer
});
Hi,
Thank you for creating this package. I have enjoyed using it so far.
There is a scenario I'm trying that I'm having trouble with. I have a component that requires an array of items for a specific user that comes from firebase. The list of item keys is listed under the user in firebase, so my initial watch looks something like:
@firebase(
props => [
`users/${props.userId}/items`
]
)
which gives me the list of item keys for that user. I then need to query those items themselves from firebase from /items
by key. What is the preferred / recommended way to do this?
Initially I tried passing the array of keys to a lower component but that didn't work since @firebase()
doesn't retrigger when props
get updated, and the keys array was empty at first.
Thank you in advance.
First, thank you for this library, very useful!
I'm trying to implement Email/Password login based on the example provided in AppWithAuth.js. I created a dedicated component Login.js (see code below) and I'm not using decorator pattern so I changed the code a bit.
The issue is that I always get a 'auth/network-request-failed' error code. There is no corresponding network request. I did some digging, found this thread that suggests that React checks the error code synchronously: https://groups.google.com/forum/#!topic/firebase-talk/yeo8z7nu_K4
I'm not sure I'm not doing something wrong here. The rest works, I connect/read/update my data fine.
Below my code:
import React, {Component} from 'react'
import {firebase, helpers} from 'redux-react-firebase'
import {connect} from 'react-redux'
const {pathToJS} = helpers
class Login extends Component {
constructor(){
super()
this.state = {loading:false}
}
render(){
const {firebase, authError} = this.props
const handleLogin = () => {
const {email, password} = this.refs
const credentials = {
email: email.value,
password: password.value
}
firebase.login(credentials)
this.setState({ 'loading':true})
}
const error = (authError) ?
authError.toString()
: (this.state.loading) ?
'loading'
: ''
return(
<div>
<h1>Login</h1>
<input type='email' placeholder='Email' ref='email' /><br/>
<input type='password' placeholder='Password' ref='password' />
<p>{error}</p>
<div onClick={handleLogin}>Login</div>
</div>
)
}
}
const LoginWrapper = firebase()(Login)
export default connect(
({firebase}) => (({firebase}) => ({ authError: pathToJS(firebase, 'authError') }) )
)(LoginWrapper)
From the beginning this confused me a bit: For some reason, this library (and I think I also saw it in other libraries) gave special significance to the /data
path, specifically by offering the dataToJS
convenience helper function. From what I understand, the /data
path has no special significance to Firebase per se, so, if I am not utterly wrong, this is based on some sort of convention, isn't it?
Seeing how your library gives special attention to the /data
path, references to documents which propose the convention of structuring your data in Firebase like this would be greatly appreciated, not sure if you or anyone else could provide those?
(Slightly off-topic: In general, any sort of list of resources and conventions that help new-comers better structure their data right from the start, would love to hear about it :) )
hi i saw in the docs that this one is In the future (Firebase queries),
do you have any estimation for this one ?
after i tried couple of packages of react and firebase integration i can say that your's package is
the most efficient one because its include redux in perfect way, but fetching data is basic feature that is missing.
Assuming I have:
@firebase((props, firebase) => ([
'/quizzes',
'/quizProblems'
]))
and I have an object /quizzes/abc
in the database,
then:
dataToJS(firebase, '/quizzes/abc')
will return undefined.
However:
dataToJS(firebase, '/quizzes/').abc
works.
I would assume this is because you are not actually converting nested Firebase data into immutables
. I absolutely agree that this is a good thing - in terms of performance, as well as in practical terms, considering that you are not supposed to change firebase-managed data directly at all, but rather commit any changes through the firebase API instead.
Either way, this and general data management guidelines should be explicitly stated in the docs, while also hinting at _.get
to directly access firebase data at a given path.
Getting the redux mirror of the local firebase cache to become readonly, would be an even bigger plus! :)
I was having problems connecting to new Firebase instances using the old v2.4.x library. Any thoughts on switching to the new API soon?
Have done a few full apps with V3 and redux, so I am willing to help. Let me know if you agree, and I will work on making a PR.
I'm following the auth example, but the user profile comes as undefined
, although the auth
object is fine:
@firebase()
@connect(
(state, props) => ({
user: pathToJS(state.firebase, 'auth'),
profile: pathToJS(state.firebase, 'profile')
})
)
const createStoreWithFirebase = compose(
reduxReactFirebase(firebaseConfig, {userProfile: 'users'}),
window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
I've also tried without the devTools stuff, but no luck.
I do have the 'users' node in my Firebase database, although no ID is being created in the 'users' node when using firebase.createUser(credentials, { name.value })
, which might be the real cause of the issue...
BTW, in the docs says: "profile if initialized with userProfile support then profile will be saved into ${userProfile}/${auth.uid}", so that means it should create the new key in the 'users' node.
I've also tried to rename userProfile
to profile
in the store, but it doesn't make any effect:
reduxReactFirebase(firebaseConfig, {profile: 'users'}),
when trying to call createStoreWithFirebase on the server I get this error.
export const createStoreWithFirebase = compose(
reduxReactFirebase(config),
)(createStore);
I can recreate the error if I import firebase from the server
import * as firebase from "firebase"
console.log(firebase);
ReferenceError: self is not defined
at eval (eval at ./node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1), <anonymous>:25:367)
at eval (eval at ./node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1), <anonymous>:37:614)
at eval (eval at ./node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1), <anonymous>:38:4)
at Object../node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1)
at __webpack_require__ (/srv/eat/www/server.bundle.js:21:30)
at eval (eval at ./node_modules/firebase/firebase-browser.js (/srv/eat/www/server.bundle.js:1160:1), <anonymous>:12:1)
at Object../node_modules/firebase/firebase-browser.js (/srv/eat/www/server.bundle.js:1160:1)
at __webpack_require__ (/srv/eat/www/server.bundle.js:21:30)
at eval (eval at ./node_modules/redux-react-firebase/build/compose.js (/srv/eat/www/server.bundle.js:4962:1), <anonymous>:7:17)
at Object../node_modules/redux-react-firebase/build/compose.js (/srv/eat/www/server.bundle.js:4962:1)
ReferenceError: self is not defined
at eval (eval at ./node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1), <anonymous>:25:367)
at eval (eval at ./node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1), <anonymous>:37:614)
at eval (eval at ./node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1), <anonymous>:38:4)
at Object../node_modules/firebase/messaging.js (/srv/eat/www/server.bundle.js:1167:1)
at __webpack_require__ (/srv/eat/www/server.bundle.js:21:30)
at eval (eval at ./node_modules/firebase/firebase-browser.js (/srv/eat/www/server.bundle.js:1160:1), <anonymous>:12:1)
at Object../node_modules/firebase/firebase-browser.js (/srv/eat/www/server.bundle.js:1160:1)
at __webpack_require__ (/srv/eat/www/server.bundle.js:21:30)
at eval (eval at ./node_modules/redux-react-firebase/build/compose.js (/srv/eat/www/server.bundle.js:4962:1), <anonymous>:7:17)
at Object../node_modules/redux-react-firebase/build/compose.js (/srv/eat/www/server.bundle.js:4962:1)
at eval (eval at ./node_modules/redux-react-firebase/build/compose.js(/srv/eat/www/server.bundle.js:4962:1), <anonymous>:7:17)
line 7 on compose.js requires firebase and it errors when ran on the server
When the user logs out of the app, all the data is removed by the reducer. This does not work for me and I think this behaviour isn't really that convenient for other purposes. I want some of the data to remain in the state and I cannot think of a good way of achieving that.
It was a basic Firebase middleware:
const fbMiddleware = store => next => action => {
const result = next(action);
if(action.type!=='SET_STATE'){
firebaseRef.update(store.getState().toJS())
}
}
const store = createStore(reducer, applyMiddleware(thunk, fbMiddleware))
Despite the fact that on the 1.x branch, all authentication methods were supported, the current version only provides signInWithEmailAndPassword
.
Seems like quite a big step backward :/
I am guessing, you guys could not find the time to update for all firebase v3 features?
It's not too big a deal since onAuthStateChanged
is being monitored. It's just that LOGIN_ERROR
won't be dispatched in case signInWithPopup
or signInWithRedirect
throw any errors.
Per the redux docs for createStore, you can pass in an optional third argument for createStore
, which is commonly used to apply middlewares. Following the example in the README, this doesn't work as expected because reduxReactFirebase
only returns a createStore
function that accepts two arguments.
For example, when using the thunk middleware:
import {createStore, combineReducers, compose, applyMiddleware} from 'redux'
import {reduxReactFirebase, firebaseStateReducer} from 'redux-react-firebase'
import thunkMiddleware from 'redux-thunk'
const rootReducer = combineReducers({
firebase: firebaseStateReducer
})
const config = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
}
const createStoreWithFirebase = compose(
reduxReactFirebase(config),
)(createStore)
const middlewares = applyMiddleware(thunkMiddleware)
const store = createStoreWithFirebase(rootReducer, initialState, middlewares)
the middlewares argument does not actually get passed through to redux's createStore
function.
I see in the example (https://github.com/tiberiuc/redux-react-firebase/blob/master/example/App.js)
@firebase()
and then later:
@firebase( [
'/todos', // if list is too large you can use ['/todos']
])
I'm not sure why this happens twice, and what the decorator does exactly, and what the alternative would be with ES5.
Also, the comment // if list too large you can use ['/todos']
I don't understand what this means, can you elaborate? (there is no difference in '/todos'
)
Going into this, I thought this was going to be similar to redux-storage-engine-localstorage
, which is my fault, but perhaps partially the documentations'.
I'm curious why there are no dispatchers used, at least not in the user's code, only in the src
. The code-example omits the fact that direct calls to Firebase are made, and then changes would come back to the store
which works, but I don't understand this approach as it circumvents a more "reduxy" way of having dispatchers initiate changes, to avoid bugs, inconsistencies and confusion.
It's also very confusing when the example code is missing half of the code that makes it work, and misleading, as from the example-code I assumed dispatches where used when making changes.
For example the handleAdd
function definition is not shown, only in example source, where it turns out it does a plain firebase.push
, which is fine, but not what I expected when I read the initial docs.
What I expected was, I dispatch an action, it changes something in the local store
, and at the same time updates it in firebase. The main problem is when I use multiple middlewares, like localstorage, I want to prevent having to dispatch
and update firebase everytime, these should be unified.
I understand that how it is now, listeners are being placed, so the top store is always up to date.
What I would suggest is at least one example of how to use this in conjunction with dispatch
, instead of calling firebase directly, like mentioned above, having this work with some sort of middleware
and use set
push
and remove
.
Or an example of how to use it with mapStateToProps, mapDispatchToProps
?
Maybe I'm completely wrong about these approaches, but it's just an idea..
Hi, I am using your repository for all functionalities with my app. But geoFire seems to be an integral part of my app and I am unable to understand how to use both in sync with redux.
Please suggest!
TIA
Hi, I can't get my data from firebase using @connect. Also I'm using react router to pass my params.
There is my code :
@firebase( [ 'fishes' ]) @connect( (state, props) => ({ fishes: dataToJS(state.firebase,
/${props.params.storeId}/fishes) }) )
props.params.storeId is equal to 'itchy-drab-leaves' from the url.
My firebase url look like this : https://fishes-store.firebaseio.com/itchy-drab-leaves
but I can send data to firebase with push :
firebase.push(
${this.params.storeId}/fishes, data)
What I'm doing wrong ?
Thanks !
As of React v15.5 React.PropTypes
has been deprecated. See https://facebook.github.io/react/warnings/dont-call-proptypes.html for more information
When I follow the example as close as possible, I'm stuck when I try to define:
{ firebase } = this.props
From exampe: https://github.com/tiberiuc/redux-react-firebase/blob/master/example/App.js
My component has no this.props.firebase
, it does have this.props.store.firebase
My reducer (reducers/index):
Redux = require 'redux'
{ combineReducers } = Redux
{ firebaseStateReducer } = require 'redux-react-firebase'
visibilityFilter = require './visibilityFilter'
combinedReducer = combineReducers({
visibilityFilter: visibilityFilter,
firebase: firebaseStateReducer
})
I assume that's where this.props.store.firebase
comes from.
Then in the file where I put the Provider
component:
reducers = require './reducers/index'
firebaseRef = reduxReactFirebase('https://xxx.firebaseio.com/', { 'userProfile', 'users'} )
composedStore = compose(firebaseRef)(createStore)
store = composedStore(reducers , {})
...
// then later:
ReactDOM.render(
<Provider store={store}>
<App store={cubeStore.getState()} />
</Provider
Then, when I inspect Provider
with React devtools:
Object
dispatch: dispatch(action)
firebase: Object
getState: getState()
replaceReducer: replaceReducer(nextReducer)
subscribe: subscribe(listener)
Symbol(observable):observable()
This looks good, and firebase
contains _
, helpers
, and ref
But this is in this.props.store.firebase
, not in this.firebase
like the example suggests.
However, then I try to connect firebase to one of my containers, and it gets a context store
, and also this.state.storeState
which is not documented anywhere.
{ firebase, helpers } = require 'redux-react-firebase'
{ isLoaded, isEmpty, dataToJS } = helpers
firebase = firebase(['test']).bind(this)
connect(({firebase}) => ({
test: dataToJS(firebase, 'test'),
})
).bind(this)
https://github.com/tiberiuc/redux-react-firebase/issues/20
this.state.storeState
contains _root
and a size
prop, in that Connect
ed element.
Now main problem is, that I can't use firebase.set()
like intended from the examples, and I'm sure I shouldn't manually extract it from the context.store.firebase.helpers
?
(As a sidenote, while browsing through the source, I don't understand the import Firebase from 'firebase'
in https://github.com/tiberiuc/redux-react-firebase/blob/master/source/index.js, I don't see it is ever used there?)
I have a package.json with [email protected]
, [email protected]
. When installing redux-react-firebase
, it complains that these peer dependencies aren't met (expecting lower versions). Will it be updated to support latest libraries?
is there a way to query? for example, first 5.
In my firebase database I have a pages
resource, which takes care of storing the data for the static pages of my app. It looks like this:
As you can see, I have a slug
attribute, which I intend to match with the browser URL to retrieve the page data when the user lands on /about
.
In the docs, I can see how to request a specific resource item using the ID, but how can I do it with a field value? In my case the slug
value:
@firebase(
props => ([
`pages/${search by slug}`
])
)
@connect(
(state, props) => ({
todo: dataToJs(state.firebase, `pages/${search by slug}`)
})
)
Defined @firebase(['/chats#orderByChild=timestamp'])
and my data doesn't sort, but that works if I tried to do it directly by firebase API
import firebase from 'firebase';
const userMobilePath = '/chats';
firebase.database().ref(userMobilePath)
.orderByChild('timestamp')
.on('value', function(snapshot) {
const data = [];
snapshot.forEach(function(child) {
data.push(child.val());
}.bind(this));
data.reverse().map(function(val) { console.log('val', val.title); });
});
Could you check and add some sorts methods to your example?
firebase.login() does not seem to change the redux state of authError
. How do I know if the user has inputted an invalid username / password?
you can delete this one it was issue on my configuration
SOOOOO many time my coworkers and I have confused this repo for the real one. GO AWAY ๐ I just spent a half hour reading the wrong docs. You owe me money ๐ฐ
Sad that the API has significant changes, but so things go. I've been using re-base but I love to play with your library. Do you have a plan for update?
Right now if I add latest react-redux to my project yarn check
fails with error:
error redux-react-firebase#react-redux@^4.0.6 doesn't satisfy found match of [email protected]
I am on [email protected], please see my package.json enclosed.
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.