Im getting this "TypeError: Object(...) is not a function" when i try to run the react-app.
im getting the error in the store of redux. I dont know why im getting this error, is this because it have something to do with React-Router.
This is my file
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './Institute/Style/style.css'
import { ProtectedRoute } from './Institute/Protectedroutes/index'
import { Provider } from 'react-redux';
import store from './Redux/store/storage';
import 'bootstrap/dist/css/bootstrap.min.css';
//Some more Components imported here.
class App extends React.Component {
render() {
return (
<div>
<div>
<div id="navbar">
<ul id="nav">
<li>
<Link to='/'>
Home
</Link>
</li>
<li>
<Link to='/profilepage'>
Profile
</Link>
</li>
<li>
<Link to='/events'>
Events
</Link>
</li>
<li>
<Link to='/jobs'>
Jobs
</Link>
</li>
<li>
<Link to='/login'>
Login
</Link>
</li>
<li id="sch">
<Link to='/searchprofile'>
Search People</Link>
</li>
</ul>
</div>
<div>
</div>
</div>
<Switch>
<Route path='/' exact component={Home}/>
<Route path='/login' component={Login}/>
<ProtectedRoute path='/searchprofile' component={Searchprofile}/>
<ProtectedRoute path='/profilepage' component={Profilepage}/>
<ProtectedRoute path='/jobs' component={Jobs}/>
//More Routes here
<Route path='*' component={() => "(404 Not Found)"}/>
</Switch>
</div>
);
}
}
ReactDOM.render(
<Provider store={store}>
<Router>
<App/>
</Router>
</Provider>,
document.getElementById('root')
);
And this is my action file from action folder
const Auth_True = () => {
return{
type: 'Auth_True',
Auth_State: true
}
}
const Auth_False = () => {
return{
type: 'Auth_False',
Auth_State: false
}
}
export default {Auth_False,Auth_True};
And this is my Reducers from reducers folder
const intialState = {
Auth_state : false
}
const authstate = (state = intialState, action) => {
switch(action.type){
case 'Auth_True':
return{
Auth_state: action.Auth_state
}
case 'Auth_False':
return{
Auth_state: action.Auth_state
}
default:
return state;
}
}
export default authstate;
And the store from store folder - Getting Error from this file or i dont know from where exactly as it show
import { createStore } from 'react'
import authstate from '../reducers/reducers'
const store = createStore(authstate);
export default store;
Finally the Component where i dispatch the action
import React from 'react';
import { connect } from 'react-redux'
import Auth_True from '../../Redux/action/actions'
import Auth_False from '../../Redux/action/actions'
class Login extends React.Component{
render(){
return(
<div>
<div>
<h3>Auth State : {this.props.Auth}</h3>
<button onClick={this.props.change_state_true}>Set True</button>
<button onClick={this.props.change_state_false}>Set False</button>
</div>
</div>
);
}
}
const mapStatesToProps = state => {
return{
Auth : state.Auth_State
}
}
const mapDispatchToProps = dispatch => {
return{
change_state_true : () => dispatch(Auth_True()),
change_state_false : () => dispatch(Auth_False())
}
}
export default connect(mapStatesToProps,mapDispatchToProps)(Login);
Can u guys please help me understand why is this happening is this because of React-Router or the connect function from the component where i dispatch or is it the version of the redux and react not supporting.

createStoreis an export fromredux, notreact