user image

Published in : 2022-03-02

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


nico Date : 2022-03-06

Best answers


Best answers


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.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

React usestate array map() is not working
Publish date: 2022-04-22 | Comments: 3

Tag: React js

How to use SetFieldValue from outside render function? Formik
Publish date: 2021-07-03 | Comments: 2

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

Unexpected mix of '&&' and '||' Reactjs
Publish date: 2021-10-30 | Comments: 0

Tag: React js