nico
Published in : 2022-03-02
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 ofimport {MyComponent} from './xxxxx/MyComponent';Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
nico Date : 2022-03-06
Best answers
4
Best answers
4
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
To use properly the newly created connected component here
we can import the default export ONLY by doing this WITHOUT the curls { } !
I can even use any name I want here, like for example the
MyConnectedComponent in the importBecause here the name doesn't matter in the import because there can be only one export default per module.
- Named Export :
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.