React Redux : Connect is not called

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';

Comments

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.