0

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.

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.

1
  • 1
    createStore is an export from redux, not react Commented Apr 7, 2020 at 14:18

1 Answer 1

1

instead of import { createStore } from 'react';

Try import { createStore } from 'redux';

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

2 Comments

i made the changes u said and i got the same error after pressing the SET TRUE button in the login component where it dispatches the action. what should i do??
Can you post your code to codesandbox.io and give me a link?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.