score:0

QUESTION 1:

I believe you have to wrap withRouter first.

Try this:

import { connect } from "react-redux";
import { withRouter } from "react-router";

export default withRouter(connect(mapStateToProps, null)(App));

QUESTION 2: You are mapping the state to props so the correct way to access auth from your state in your component is this.props.auth

Try to console.log(this.props) in your render and you will see what I mean. Also check the docs on https://react-redux.js.org/api/connect

Hope this helps

score:0

ANSWER 1: I think that you should use "connect" on a component called inside Provider. The docs says:

Could not find "store" in either the context or props
If you have context issues,

Make sure you don’t have a duplicate instance of React on the page.
Make sure you didn’t forget to wrap your root or some other ancestor component in <Provider>.
Make sure you’re running the latest versions of React and React Redux.
/*Into App.js*/
return (
      <Provider store={store}>
        <HashRouter>
          <React.Suspense fallback={loading()}>
            <ConnectedComponent>
          </React.Suspense>
        </HashRouter>
      </Provider>
    );
    
    /*ConnectedComponent.js*/
    class ConnectedComponent extends React
    {
      render(){
      {
        /* move all your routing and app code Here*/
      }
    }
    
    //call connect on your ConnectedComponent
    export connect(mapStateToProps, null)(ConnectedComponent)

I also think that you don't need to use withRouter because seems that you don't need the ReactRouter props (match, history, location) on your App component.

You can see here wen you should use withRouter: https://reacttraining.com/react-router/web/api/withRouter

ANSWER 2: The connect() function do the job of connecting the Redux store to your React components tree. You should always access to the store data through the props object.


Related Query

More Query from same tag