nico
2 Mar 2022
React js
Hello, all I met a problem which is very annoying.
I use a component which connects to the redux store
import React from 'react';
import { connect } from "react-redux";
import * as repositoryActions from '../../actions/repositoryActions';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
export function MyComponent({ onPostData, onUpdateData }) {
const [value, setValue] = React.useState(new Date());
function handleDownload(event) {
event.preventDefault();
onPostData('/xxx/yyyy', value);
}
return (
<React.Fragment>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box m={2}>
<DatePicker
inputFormat="yyyy-MM"
views={['year', 'month']}
label="Year and Month"
minDate={new Date('2012-03-01')}
maxDate={new Date('2023-06-01')}
value={value}
onChange={setValue}
renderInput={(params) => <TextField {...params} helperText={null} />}
/>
</Box>
</LocalizationProvider>
<Button color="primary" size="large" type="submit" variant="contained" onClick={handleDownload}>
Download
</Button>
</React.Fragment>
);
}
function mapStateToProps(state) {
return {
data: state.data
};
}
function mapDispatchToProps(dispatch) {
console.log('mapDispathToProps');
return {
onPostData: (url, obj) => dispatch(repositoryActions.postBurnSegmentData(url, obj)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
Then I try to import it, but connect is not called at all, why could redux not be called with this default export and named import?
import React, { Component } from 'react';
import { MyComponent} from './xxxxx/MyComponent';
export class Home extends Component {
render() {
return (
<div>
<MyComponent/>
</div>
);
}
}
I managed to fix by doing, but can you explain why ?? thanks
import MyComponent from './xxxxx/MyComponent';
instead of
import {MyComponent} from './xxxxx/MyComponent';
nico
6 Mar 2022
Best Answer
Ok, here is the full explanation about how to make sure :
- that imports are properly done
- that “redux connect” works properly.
Primer about javascript and modules in ES6 module format
There are two ways of exporting module in js.
- Default Export : we often see on the redux doc
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
To use properly the newly created connected component here
we can import the default export ONLY by doing this WITHOUT the curls { } !
import MyComponent from './xxxxx/MyComponent';
I can even use any name I want here, like for example the MyConnectedComponent in the import
import MyConnectedComponent from './xxxxx/MyComponent';
Because here the name doesn't matter in the import because there can be only one export default per module.
- Named Export :
export const MyComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);
Here we MUST import with the {} and we must respect the name of the named export : here for example it is MyComponent
import {MyComponent} from './xxxxx/MyComponent';
By using properly the import, the redux connection will be called properly, the mapStateToProps and mapDispatchToProps will be called as expected.
Just remember:
default export ==> import wihout {}
named export ==> import with {}
I hope this detailed explanation will help to avoid pittfalls.
© 2023 Copyrights reserved for web-brackets.com