I’m trying to import a function ‘getMoviesList’ written in action/index.js but getting an error even though my code and paths are correct Please have a look on my App.js ( where I’m trying to import that function ) and ./action/index.js ( where I have defined that function )
App.js
JavaScript
x
40
40
1
import React, { Component } from 'react';
2
import { connect } from 'react-redux';
3
import { getMoviesList } from './actions';
4
5
class App extends Component {
6
7
componentDidMount() {
8
this.props.dispatch(getMoviesList());
9
}
10
11
render() {
12
13
return (
14
<div className="App">
15
<h1>HELLO MOVIES_LIST</h1>
16
{
17
this.props.movies ?
18
this.props.movies.map((object) => {
19
return (
20
<div key={object.id}>
21
<h3>{ object.name }</h3>
22
</div>
23
)
24
})
25
: null
26
}
27
28
</div>
29
);
30
}
31
}
32
33
function mapStateToProps (state) {
34
return {
35
movies: state.movies
36
}
37
}
38
39
export default connect(mapStateToProps)(App);
40
action/index.js
JavaScript
1
21
21
1
export default function getMoviesList () {
2
// Go to the database and get data
3
return {
4
type: 'MOVIES_LIST',
5
payload: [
6
{
7
id: 1,
8
name: 'dark'
9
},
10
{
11
id: 2,
12
name: 'scam 1992'
13
},
14
{
15
id: 3,
16
name: 'peaky blinders'
17
}
18
]
19
}
20
}
21
Advertisement
Answer
change import { getMoviesList } from './actions';
to import getMoviesList from './actions';
as getMoviesList
function is exported as default. As a result, it should be imported without using curly braces.