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 ofimport {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 MyComponentimport {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

[solved] Reactjs is not updating the props
Publish date: 2022-02-04 | Comments: 2

Tag: React js

import link as router link from 'react-router-dom' Reactjs
Publish date: 2021-09-30 | Comments: 3

Tag: React js

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

Tag: React js

Warning: React.jsx: type is invalid
Publish date: 2022-05-06 | Comments: 1

Tag: React js

How to get the selected object in "Autocomplete material ui"?
Publish date: 2021-12-22 | Comments: 3

Tag: React js

How to implement SSO with React and ASP.NET Core Web API ?
Publish date: 2022-11-03 | Comments: 0

Tag: React js