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.
Related
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));
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,
Couldn't find it in the docs: What is the best practice when using React Navigation together with Redux?
Should you do 1.:
export default withNavigation(connect(
mapStateToProps,
{ someFunction }
)(SomeComponent))
Or 2.:
export default connect(
mapStateToProps,
{ someFunction }
)(withNavigation(SomeComponent))
?
After some googling it seems to be that 1. is the best practice.
I have Material-ui and redux all set up in and working, however redux has you use connect with higher order components:
export default connect(mapStateToProps)(ComponentName);
while the Material-ui documentation has you do something similar:
export default muiThemeable()(ComponentName);
How would you combine the theme with the redux export to get them to export or work together?
You can compose multiple Higher Order Components:
export default muiThemeable()(connect(mapStateToProps)(ComponentName));
An HOC takes a component (and possibly other arguments) and returns another component. So, the return value of an HOC is a valid argument for another HOC.
i have a file inside action directory which is root.js.
Root.js will compile all the others action inside, and i bind it with bindActionCreators
export const all = (store) => {
AUTH: bindActionCreators(AUTH.actions, store.dispatch),
....: .....
}
From what i learned, bindActionCreators is for the purpose of auto dispatching the action.
If that is the case, then how do i access it from smart component?
I see things like dispatch(action). But since now i already bind it globally, i dont think that i would need to specify dispatch anymore. How do i do it, or is there any part that i misunderstood?
Thank you
bindActionCreators - will create an object of actions each wrapped with the dispatch.
It's good for passing them as refs to non-connected components that should not know anything about redux or dispatch.
Quote from the DOCS:
The only use case for bindActionCreators is when you want to pass some
action creators down to a component that isn't aware of Redux, and you
don't want to pass dispatch or the Redux store to it.
So if you want that connected component to pass action creators to a dumb component, you can set an object via bindActionCreators and pass it with props to the dumb component.
Example:
const myActionCreators = bindActionCreators(Auth.myActions, dispatch)
<DumbComponent {...myActionCreators} />
The recommended approach is to have each connected component file import the action creators it needs, and use the "object shorthand" supported by connect:
import {addTodo, toggleTodo} from "./todoActions";
const actions = {addTodo, toggleTodo};
export default connect(null, actions)(TodoList);
// each TodoList instance now has this.props.addTodo and
// this.props.toggleTodo, which will dispatch actions when called.