react-waypoint
is a cool library but I'm already using react-virtualized
. Sorry for being unclear. My issue concerns needing a different storeAs
name for every page of listeners because, without it, each listener call overwrites the results from the previous page/listener. So, my workaround is to use storeAs
and create a unique store name for each listener. For example, I store the first page in storeAs: 'items.0'
, 2nd batch in storeAs: 'items.1'
, 3rd in storeAs: 'items.2'
, and so on. I'd rather be able to store all listener results in storeAs: 'items'
, which makes my mapStateToProps
simple: items: state.firestore.ordered.items || []
. Otherwise I have to reduce all the state.firestore.ordered.items.n
stores into items
. I'm using reselect
to memoize this, but it would be nicer if each page of listeners could just append the new page of items to state.firestore.ordered.items
rather than using a different storeAs
for each listener. Is that possible using a config option like mergeOrdered
, allowMultipleListeners
, or oneListenerPerPath
?
@prescottprue is there anything like profileParamsToListen
in react-redux-firebase
?
I want to add global listener to the app on connections/${profile.connectionId}
node in database.
There is profileParamsToPopulate
Api. The thing is that it doesn't listen some prop under profile continually, but only populates it once on every profile update.
Hello Guys and @prescottprue I have been facing a major issue with setting up my React Redux Firebase & Redux Firestore on a base project. The issue is when i use firestoreConnect
The errors that i get are : TypeError: this.props.firestore.setListeners & this.props.firestore.unsetListeners is not a function
I have read through all the docs as well read through the examples of the repo at the next branch but couldn't solve it.
i would be very grateful if someone could help me here.
I have all my react-redux libraries to the latest version , my package.json :
"dependencies": {
"firebase": "^6.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0-alpha.4",
"react-redux-firebase": "^3.0.0-alpha.11",
"react-scripts": "3.0.0",
"redux": "^4.0.1",
"redux-firestore": "^0.7.3"
},
My index.js
file with setup :
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import Todos from "./Todos";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore"; // <- needed if using firestore
import { createStore, combineReducers, compose } from "redux";
import ReactReduxFirebaseProvider from "react-redux-firebase/lib/ReactReduxFirebaseProvider";
import firebaseReducer from "react-redux-firebase/lib/reducer";
import { createFirestoreInstance, firestoreReducer } from "redux-firestore"; // <- needed if using firestore
const fbConfig = { // XXXXXXX to hide actual config
apiKey: "XXXXXXXX_R_E-faSBKZ0FmS4o",
authDomain: "XXXXXXXX-8261c.firebaseapp.com",
databaseURL: "https://XXXXXXXX-8261c.firebaseio.com",
projectId: "XXXXXXXXXX-8261c",
storageBucket: "XXXXXXX-8261c.appspot.com",
messagingSenderId: "XXXXXXXXXXXXX",
appId: "1:XXXXXXXXXXX:web:XXXXXXXXXXX"
};
// react-redux-firebase config
const rrfConfig = {
userProfile: "users",
useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
};
// Initialize firebase instance
firebase.initializeApp(fbConfig);
// Initialize other services on firebase instance
firebase.firestore(); // <- needed if using firestore
// firebase.functions() // <- needed if using httpsCallable
// Add firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer // <- needed if using firestore
});
// Create store with reducers and initial state
const initialState = {};
const store = createStore(rootReducer, initialState);
const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance // <- needed if using firestore
};
// Setup react-redux so that connect HOC can be used
function Index() {
return (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<Todos />
</ReactReduxFirebaseProvider>
</Provider>
);
}
ReactDOM.render(<Index />, document.getElementById("root"));
The Todos.js
file where i am using firestoreConnect :
import React, { Component } from "react";
import PropTypes from "prop-types";
import { compose } from "redux";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
/* function Todos(props) {
return (
<div>
<p>This is a todo page</p>
{console.log(props)}
</div>
);
} */
class Todos extends Component {
render() {
return (
<div>
<p>This is a todo page</p>
{console.log(this.props)}
</div>
);
}
}
const enhance = compose(
firestoreConnect({ collection: "todos" }), // or () => ["users"]
connect((state, props) => {
console.log(state.firestore.ordered);
return { todos: state.firestore.ordered.todos };
})
);
export default enhance(Todos);
I have tried functional component also, i get the same error.
The following are the logs i get:
Few warnings :
1. Warning: Failed prop type: The prop `dispatch` is marked as required in `FirestoreConnectWrapped(Connect(Todos))`, but its value is `undefined`.
2. Warning: Failed prop type: Invalid prop `firebase` of type `string` supplied to `FirestoreConnectWrapped(Connect(Todos))`, expected `object`.
3. Warning: Failed prop type: Invalid prop `firestore` of type `string` supplied to `FirestoreConnectWrapped(Connect(Todos))`, expected `object`.
The debugs i had added :
4. {}
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
5. {firestore: "ReduxFirestore", firebase: "ReactReduxFirebase", dispatch: ƒ, todos: undefined}
dispatch: ƒ dispatch(action)
firebase: "ReactReduxFirebase"
firestore: "ReduxFirestore"
todos: undefined
__proto__: Object
The errors because of which the code breaks :
6. Uncaught TypeError: this.props.firestore.setListeners is not a function
at FirestoreConnectWrapped.componentDidMount (firestoreConnect.js:133)
7. Uncaught TypeError: this.props.firestore.unsetListeners is not a function
at FirestoreConnectWrapped.componentWillUnmount (firestoreConnect.js:139)
Some extra erros, i am assuming these indicate the location of the above errors :
8. index.js:1437 The above error occurred in the <FirestoreConnectWrapped(Connect(Todos))> component:
in FirestoreConnectWrapped(Connect(Todos)) (created by Context.Consumer)
9. Uncaught TypeError: this.props.firestore.setListeners is not a function
at FirestoreConnectWrapped.componentDidMount (firestoreConnect.js:133)
I have read through all the docs i could but i couldn't get to make a working solution, also because all the examples are updated according to the newer version.
Any help would be really appreciated