Import syntax React Redux

Question

Hello I am working on Shopping List and my file looks like this:

import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import ShoppingList from './components/ShoppingList';

import {Provider} from 'react-redux';
import store from './';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
  return (
    <Provider store={store}>
    <div className="App">
     <AppNavbar/> 
     <ShoppingList/>
    </div>
    </Provider>
  );
}

export default App;

However, Ireceived this error: Failed to compile ./src/App.js Attempted import error: './' does not contain a default export (imported as 'store').

can someone please help fix this ?

do you have an index.js file in the same directory as your shopping list component? — Phillip
– Phillip, Commented Apr 15, 2020 at 16:26

norbitrial · Accepted Answer · 2020-04-15 16:25:59Z

1

The problem in your code is how you are trying load the store with import store from './';.

Instead you need to use createStore() from redux as the following:

import { createStore, applyMiddleware } from 'redux';

const store = createStore(
    /* your reducers */,
    applyMiddleware( /* your middleware */ ),
);

What you can pass to the <Provider /> as follows:

ReactDOM.render(<Provider store={store}>
                    <App />
                </Provider>, document.getElementById('root'));

Read further here about createStore(reducer, \[preloadedState\], \[enhancer\]) which:

Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.

I hope this helps!

answered Apr 15, 2020 at 16:25

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dushan Ranasinghage · Accepted Answer · 2020-04-15 18:14:53Z

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import reducers from './reducers';

import Posts from './containers/Posts'
import NavBar from './components/NavBar';

// Apply Thunk middleware
const middleware = applyMiddleware(thunk);
// Create store
const store = createStore(reducers, enhancer);

class App extends Component {
 render() {
    return (
  <Provider store={store}>
      <React.Fragment>
        <NavBar />
        <Posts />
      </React.Fragment>
  </Provider>
);

As you can see, the app.js page should be looked like this. You can't just import store from another file. It's better to use best practices like this. Now you will wonder how the reducers came from. Generally, developers put all the reducers in a reducers folder. In that folder you can have a index.js file and other reducer files. For now, you better use a empty main reducer index.js like below.

 import { combineReducers } from 'redux'

 const rootReducer = combineReducers({
      null
  })

  export default rootReducer;

If you something like post or whatever, the code should be modified like this.

import { combineReducers } from 'redux'

import posts from './posts';

const rootReducer = combineReducers({
    posts: posts
 })

 export default rootReducer;

Simply, posts is a post reducer in the reducers folder. Selecting a appropriate middleware is up to you. I have used redux-thunk. You can use redux-saga, redux-logic, or custom middleware. I think this will help you to solve your problem.

Thank you very much. I used your code. Can you please help me handle this new feedback: Failed to compile ./src/App.js Line 25:3: Parsing error: Unexpected token 23 | </React.Fragment> 24 | </Provider> > 25 | ); | ^

Collectives™ on Stack Overflow

Import syntax React Redux

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related