store.getState is not a function react-redux

Question

Newbie here in the world of reactjs. I tried using redux and redux thunk along with reducers, though I don't full understand if they are all in one package. I'm creating a login in that will using those items. But I kept on seeing store.getstate is not a function.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import {Provider} from 'react-redux';

const store = require('./store/index');

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

store/index.js

import {createStore} from 'redux'
import AllReducers from './reducers/AllReducers';
   // import 

const initialStates = {
auth: {
    loggedIn: false,
    user:{}
    }
}

const store = createStore(AllReducers,initialStates);

export default store;

store/reducers/AllReducers.js

import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";

const AllReducers = combineReducers({auth: AuthReducer})

export default AllReducers;

store/reducers/AuthReducers.js

const AuthReducer = (state = {}, actions) => {
switch (actions.type) {
    case 'value':
        return state;
    default:
        return state;
    }
 }


 export default AuthReducer;

I kept on getting the TypeError: store.getState is not a function Can someone help me at least an advice on how to trap this error then i will do the rest for my studying.

Thanks.

Answer 1

I think you did mistake here. <Provider store="{store()}"> You should write <Provider store={store}>

I hope this answer will help you!!

Answer 2

The problem in <Provider store="{store()}"> . You need to update like this:

<Provider store={store}>