user image

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

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

 

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