Discussion of all things Redux and Firebase (offical room of react-redux-firebase)
Hi, how can I wait for data loading before putting the values into a state? I want to retrieve data and present a form where the data can be manipulated by the user. It looks something like this:
useFirestoreConnect([
{
collection: auth.uid,
doc: profile,
storeAs: 'profile',
},
]);const profile = useSelector((state) => state.firestore.data['profile']);
const [name, setName] = useState(profile.name);
I get an error that 'profile.name' is not defined, probably because the data is not yet loaded. But I can't use isLoaded because of the useState.
If I do a setName(profile.name)after the isLoaded check I get an infinite render error.
createUser function to provision a user with a username+password and specify things like firstname, lastname, email in the profile payload. That information gets reflected in firebase auth + firestore as expected. My issue is then I call signIn with the same user+pass (so a signInWithEmailAndPassword), I successfully log in, I see the @@reactReduxFirebase/LOGIN trigger but the store profile node stays in isEmpty: true, isLoaded: false. Is this an expected behavior? I thought the profile would load upon a successful login. Thanks for your help!
7 replies
Hey I have a design decision question:
const teamId = useSelector((state) => state.firebase.data.profile.teamId);
useFirestoreConnect({collection: 'rooms', where: ["team", '==', teamId || '']})How would you design your app to handle it knowing that team could be undefined which could in turn cause something like a "missing permissions error" (because of the empty string)
Only solution I found was to have dumy components just waiting on the selectors
const WaitUntilReady = () => {
const teamId = useSelector(state => firebase.data.profile.teamId)
if (!teamId) return null
return <SomeComponentWithUseFirestoreConnect teamId={teamId} />
}
const SomeComponentWithUseFirestoreConnect = ({teamId}) => {
useFirestoreConnect({collection: 'rooms', where: ["team", '==', teamId || '']})
// render something
}
Hello! First time posting here.
We've been stuck on an error for several days now... Since updating react-redux-firebase from ^2.1.6 to ^3.9.0, we're getting the error TypeError: store.getState is not a function. when trying to build on iOs. This error is occurring in the second firestoreConnect:
export default compose<any>(
connect(
(state: State): Partial<MVProps> => ({
myUserId: get(state, 'user.profile.id'),
villagers: getFromIds(state.users, state.users.villagers),
})
),
firestoreConnect(props => [
{
collection: 'rooms',
where: [
[`type`, '==', 'userToUser'],
[`users.${props.myUserId}`, '==', true],
],
storeAs: 'myRooms',
},
]),
firestoreConnect((_, store) => {
const state = store.getState() as State;
return flatten(
defaultTo(state.firestore.ordered.myRooms, []).map((r: Room) =>
keys(r.users).map((userId: string) => ({
collection: 'users',
where: ['userId', '==', userId],
storeAs: 'myRoomsUsers',
}))
)
);
}),
connect(
(state: State): Partial<MVProps> => ({
myRooms: state.firestore.ordered.myRooms,
myRoomsUsers: state.firestore.data.myRoomsUsers,
})
)
)(view);This codebase is still pretty new to us so we're still trying to work out exactly how the redux was set up and how firestoreConnect is being used here. We've tried refactoring how the store is created and we have tried updating other dependencies but still can't get past this error. If anyone has any insights about firestoreConnect() and getState() it would be most appreciated!
Every time a component renders with
useFirestoreConnect, it will clear the existing store, which I'm not even sure if that's expected behaviour.It might also be why this issue: prescottprue/react-redux-firebase#914 is causing such a render-blocking issue, because instead of replacing them in quick succession, it is adding them, causing too many re-renders, where replacing them should cause minimal or no change at all.
< 1 2 3 4 5 6 > and you can go to a specific page, but it's sorted by for example a date, I have no idea how to select a page with a plain number, it doesn't seem to exist? I'm breaking my head over how this is achieved, all I can find is infinite scroll loading use cases ( see for example: prescottprue/redux-firestore#346)
Hello everyone, help me, please!!!
I use redux-toolkit template cra redux-typescript with react-redux-firebase and i got an error: Property 'firestore' does not exist on type 'DefaultRootState' but i added firestore:firestoreReducer to reducer in configureStore
export const store = configureStore({
reducer: {
counter: counterReducer,
firebase: firebaseReducer,
firestore: firestoreReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [
// just ignore every redux-firebase and react-redux-firebase action type
...Object.keys(rfConstants.actionTypes).map((type) => `${rfConstants.actionsPrefix}/${type}`),
...Object.keys(rrfActionTypes).map((type) => `@@reactReduxFirebase/${type}`),
],
ignoredPaths: ['firebase', 'firestore'],
},
thunk: {
extraArgument: {
getFirebase,
},
},
}),
});
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;Thanks very much
TypeError: Object(...) is not a function
Module.<anonymous>
C:/Users/Amartya/Desktop/Project/blog_s/client/src/index.js:15
12 |
13 | const store = createStore(rootReducer,
14 | compose(
15 | applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
16 | reactReduxFirebase(fbConfig), // redux binding for firebase
17 | reduxFirestore(fbConfig) // redux bindings for firestore
18 | )
this is the problem I am facing when I am connecting react to firestore database
I have tried
import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../Redux/Reducers/rootReducer';
import middlewares from '../Redux/Middleware/middleware';
import {createFirestoreInstance} from 'redux-firestore'; // <- needed if using firestore
// import {createFirebaseInstance} from 'react-redux-firebase';
// Cherry-pick modules of react-native-firebase 6.x
// import '@react-native-firebase/analytics';
import '@react-native-firebase/auth';
// import '@react-native-firebase/crashlytics';
// import '@react-native-firebase/dynamic-links';
import '@react-native-firebase/firestore';
// import '@react-native-firebase/perf';
// import '@react-native-firebase/remote-config';
import RNfirebase from '@react-native-firebase/app';
const firebase = RNfirebase.app();
const initialState = {};
// react-redux-firebase config
const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
// enableClaims: true // Get custom claims along with the profile
presence: 'presence', // where list of online users is stored in database
sessions: 'sessions', // where list of user sessions is stored in database (presence must be enabled)
enableRedirectHandling: false, // <--- required when using react-native
};
// Create store with reducers and initial state
export const store = createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middlewares)),
);
export const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance, // <- needed if using firestore
};The given error:
Possible Unhandled Promise Rejection (id: 0):
TypeError: getFirebase is not a function
Possible Unhandled Promise Rejection (id: 1):
Error: You attempted to use "firebase.app('[DEFAULT]').database" but this module could not be found.
Hello Everyone, MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps in pure JavaScript.
https://www.npmjs.com/package/create-mernjs-app
If you have any query or suggestions. Please let me know.
anyone have a solution for nested populates? here's an example:
a user object has a list of favorite songs, which is just a list of ids
a songs object has a bunch of fields, one being an author reference, which is just a user id
I want to grab a user's favorite songs and the authors for each song. is there a way to do that through useFirestoreConnect and nested populates?
Hello Everyone,
MERN Micro Framework provides starter kits for building web, desktop and mobile apps in pure JavaScript.
https://www.npmjs.com/package/create-mernjs-app
If you have any query or suggestions. Please let me know.
I'm not using redux (yet?). I have a sidebar with a list of "todo"-like items, each is a firestore doc. When you click the sidebar it navigates to the "todo detail" page and passes the todo doc as a navigation param so the detail page doesn't need to read the database again.
This is really annoying when routing to the detail page directly (e.g., deep link), so I decided we would build a "firebase provider" component that maintains a big dictionary of everything we're subscribed to, and if a component ever subscribes to anything we just hand it stuff from a preexisting subscription.
Is that a good thing to build? Or would I just be reinventing this library? I've never really used redux before and don't want to if possible.