I am getting this error: TypeError: store.getState is not a function

Question

I am getting the error:'TypeError: store.getState is not a function' and I can't determine where the problem is

here's how I created the store:

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './rootReducer';

const initialState = {
  pending: false,
  products: [],
  error: null
}
const middlewares = [thunk];

export const store=createStore(rootReducer, initialState, applyMiddleware(...middlewares));

and here's the index.js:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from './App'

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

and here's the thunk function:

function fetchProducts() {
    return dispatch => {
        dispatch(fetchProductsPending());
        fetch('https://api.spacexdata.com/v3/launches')
        .then(res => res.json()
        
        )
        .then(
          res => {
            if(res.error) {
                throw(res.error);
            }
            dispatch(fetchProductsSuccess(res.products));
            return res.products;
        })
        .catch(error => {
            dispatch(fetchProductsError(error));
        })
    }
}

export default fetchProducts;

and here's a sandbox of the problem:

https://codesandbox.io/s/polished-sunset-wxefc?file=/src/index.js

here's a screenshot of the error:

Answer 1

The store is not the default export from the ./App.jsx module. You either need to add curly braces to your import or export store as the default :

// App.jsx

export const store = /* ... */

// index.js
import { store } from './App';

or

// App.jsx

export default const store = /* ... */

// index.js
import store from './App';