2 Mar 2022

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) {


 onPostData('/xxx/yyyy', value);


 return (
 <LocalizationProvider dateAdapter={AdapterDateFns}>
 <Box m={2}>
 views={['year', 'month']}
 label="Year and Month"
 minDate={new Date('2012-03-01')}
 maxDate={new Date('2023-06-01')}
 renderInput={(params) => <TextField {...params} helperText={null} />}

 <Button color="primary" size="large" type="submit" variant="contained" onClick={handleDownload}>

function mapStateToProps(state) {
 return {


function mapDispatchToProps(dispatch) {

 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 (

I managed to fix by doing, but can you explain why ?? thanks

import MyComponent from './xxxxx/MyComponent';

instead of

import {MyComponent} from './xxxxx/MyComponent';



6 Mar 2022

Best Answer

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