So I'm trying to put together this app, using firebase and redux for storage, and Material UI as the design. I've got the firebase and firestore reducers working and all, I just run into an issue when I try to export a component using both firebase and withStyles();
(It works separately, just throws an error when I try to use both.)
Here's what I've tried:
This works, but the withStyles() is not there.
export default compose(
firebaseConnect([{ collection: 'clients' }]),
connect(mapStateToProps),
)(Clients);
This works, but it's not connected to firebase.
export default connect(mapStateToProps)(withStyles(styles)(Clients));
I've tried combining them, but each one throws an error.
export default compose(
firebaseConnect([{ collection: 'clients' }]),
connect(mapStateToProps),
)(withStyles(styles)(Clients));
export default compose(
firebaseConnect([{ collection: 'clients' }]),
connect(mapStateToProps),
withStyles(styles, {
name: 'Clients',
}),
)(Clients);
The error thrown is Uncaught Error: Path is a required parameter within definition object
Any help would be greatly appreciated. Thank you!
OK, after some messing around, I figured it out. I have to place the firebaseConnect() inside of the connect, where the actions would usually go.
const withFirebase = firebaseConnect([{ collection: 'clients' }]);
export default connect(mapStateToProps, withFirebase)(withStyles(styles)(Clients));
Related
I tried add merge props to connect
export default compose(
withStyles(styles, { withTheme: true }),
connect(
mapStateToProps,
mapDispatchToProps,
mergeProps
)(MyComponent)
But it throw TypeError: Cannot read properties of undefined (reading 'root')
when i use connect without mergeProps, it works fine
You need to show the actual functions for each of those parameters. Look into https://react-redux.js.org/api/connect#connect-parameters As you can see those parameters are functions. Maybe it will help showing your functions?
I don't know how to compose Redux with onClickOutside HOC in my component export...
I tried sth like this but didn't work
export default compose(
connect(null, mapDispatchToProps),
onClickOutside)
(DropMenu, clickOutsideConfig);
Error I got :
TypeError: Cannot read property 'isReactComponent' of undefined
You can solve this problem without using the redux compose method. Try something like the following:
export default connect(null, mapDispatchToProps)(onClickOutside(DropMenu))
Not sure what you're trying to do with the clickOutsideConfig, but you can always pass it in as props to DropMenu.
I'm new to redux and try to use it with Typescript.
I use mapDispatchProps for connect() in the component, when import this component, it requires to pass actions as props which it shouldn't.
The weird thing is when I tried with other actions, it seems fine, but just something wrong with this one.
The full code is
here
and the error message in index.tsx, where I want to import component.
Error message
Property 'getInputUserName' is missing in type '{}' but required in type 'Readonly>'.ts(2741)
App.tsx(8, 3): 'getInputUserName' is declared here.
Really happy to hear any advice.
Thanks in advance!
You should pass the action with same name as it is declared in the Props interface.
So either try this -
export default connect(
mapStateToProps,
{ getInputUserName: loginUserName }
)(App)
or this -
interface Props {
inputUserName: string;
loginUserName: typeof loginUserName;
}
Can you try this,
export default connect(
mapStateToProps,
{ getInputUserName: loginUserName }
)(App);
Cheers,
I am using react-redux-firebase and firestoreConnect to get information from my database and map it into props vía their premade reducer. To connect its information to my Component, I use the 'compose' method in the following way:
export default compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect([
{
collection: 'questions',
doc: this.props.match.params.id,
subcollection: 'messages',
}
])
)(QuestionDetail);
As you can see, I am trying to access a specific document with an ID that was passed to the component as a prop from its parent. However, 'this' is undefined in the context of 'compose' and I therefore can't use it to access the props, and my parameter.
Is there any other way I can access the id passed to the component so I can request it to Firestore?
After a deeper search through the documentation I found that you can pass props to the firestoreConnect function (Note also that I was querying subcollections in the wrong way). The code ends up being:
export default compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect((props) => [
{
collection: 'questions',
doc: props.match.params.id,
subcollections: [{ collection: 'messages' }],
}
])
)(QuestionDetail);
It should work in older version of react-router.
But I assume you are using the latest version of React Router (v4+). So you have to wrap the whole component with the "withRouter" higher-order component. It will pass updated match, location, and history props to the wrapped component whenever it renders.
At first, you have to import the withRouter.
import { withRouter } from "react-router";
Then you have to wrap it with withRouter.
export default withRouter(compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect((props) =>
[{
collection: 'questions',
doc: props.match.params.id,
subcollections: [{ collection: 'messages' }],
}]
))(QuestionDetail));
This works for me.
How do I force firestoreConnect to update? It pulls correctly from Firestore when the component mounts. But after Firestore data changes, it does not fetch the new data. Almost like there is no listener attached. Any ideas?
TodoList.js
export default compose(
connect(mapStateToProps),
firestoreConnect([{
collection: 'todos'
}])
)(TodoList)