Bdtjtk

i have my components

Signup

import React, { Component } from "react";

import { connect } from "react-redux";

import * as actionCreators from "./Store/Actions/Actions";

import { withRouter } from "react-router-dom";



class Signup extends Component {

  render() {

    console.log("signup is mounted");



    return (

      <div>

        <header>Signup component</header>

        <button onClick={this.props.onIncrementCounter}>Increment</button> */}

        <div value={this.props.ctr}>counter:</div>

      </div>

    );

  }

}



const mapStateToProps = state => {

  return {

    ctr: state.counter

  };

};



const mapDispatchToProps = dispatch => {

  return {

    onIncrementCounter: () => dispatch(actionCreators.increment()),

    onDecrementCounter: () => dispatch(actionCreators.decrement()),

    onResetCounter: () => dispatch(actionCreators.reset())

  };

};



export default withRouter(

  connect(

    mapStateToProps,

    mapDispatchToProps

  )(Signup)

);

and main

import React, { Component } from "react";



import Link from "redux-first-router-link";



import Dashboard from "./Dashboard";



import Signup from "./Signup";

import Login from "./Login";



class Main extends Component {

  render() {

    console.log("main component");

    return (

      <div>

        <header>



          <Link to="/users/signup">

            <button>Signup</button>

          </Link>

          <Link to="/users/login">Login</Link>

          <Link to="/dashboard">Dashboard</Link>

          Main component

        </header>

      </div>

    );

  }

}



export default Main;

and my app component

import React, { Component } from "react";

import { BrowserRouter as Router, Route } from "react-router-dom";

import Dashboard from "./Dashboard";

import { Provider } from "react-redux";

import Signup from "./Signup";

import Login from "./Login";

import Main from "./Main";





const App = ({ store }) => (

  <Provider store={store}>

    <Router>

      <div>

        <Route path="/" component={Main} />

        <Route path="/users/login" component={Login} />

        <Route path="/users/signup" component={Signup} />

      </div>

    </Router>

  </Provider>

);

export default App;

and index file

 import React from "react";

    import ReactDOM from "react-dom";

    import "./index.css";

    import App from "./App";

    import * as serviceWorker from "./serviceWorker";

    import Reducer from "./Store/Reducers/reducer";

    import { createStore } from "redux";

    import { Provider } from "react-redux";



    const store = createStore(Reducer);

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

    ReactDOM.render(

      <App store={store} />,



      document.getElementById("root")

    );





    serviceWorker.unregister();

and reducer

import * as actionTypes from "../Actions/ActionTypes";



const initialState = {

  counter: 0

};

export const Reducer = (state = initialState, action) => {

  switch (action.type) {

    case actionTypes.INCREMENT:

      return {

        ...state,

        counter: state.counter + 1

      };

    case actionTypes.RESET:

      return {

        ...state,

        counter: state.counter

      };

    case actionTypes.DECREMENT:

      return {

        ...state,

        counter: state.counter - 1

      };

  }

};

export default Reducer;

and actions file

import * as actionTypes from "./ActionTypes";



export const increment = () => {

  return {

    type: actionTypes.INCREMENT

  };

};



export const decrement = () => {

  return {

    type: actionTypes.DECREMENT

  };

};



export const reset = () => {

  console.log(actionTypes.RESET);

  return {

    type: actionTypes.RESET

  };

};

but i am getting these errors:

The above error occurred in the component:
Uncaught TypeError: _selectLocationState is not a function

how do I integrate this react-router with redux? I think >there is an error connecting react-router with redux.

Should I use React-router-redux or integrate with react-router and redux?

I want to navigate to signup component from main component and render value of counter to be incremented with a button, and the same value should be reflected in login component also (where i want to decrement counter value and this should again reflect in signup)