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.
Source: stackoverflow.com
Related Query
- ReactJs : What is the proper way of accessing the state data in the root component where the link between React and Redux has been implemented?
- What is the proper way to fetch data from server with ReactJS and Flux architecture where no Store presented?
- What is the best way to update my react state when data in database changes?
- In React, what is the proper way of injecting shared state into components that are not in a parent-child relationship?
- What is the correct way of setting state variables in Reactjs and what is the difference between these approaches?
- What is the proper way to use multiple layouts in ReactJS
- What is the proper way of manipulating scroll of overflowed flexbox in ReactJS
- What is the proper way to get data from database in react?
- What is the proper way to getInitialState with remote data in Reactjs?
- what is the correct way to add data array to the array state as well
- ReactJS what is the proper way to wait for prop to load to avoid crashing my page?
- -React Native, what is the way of passing state data from A.js to B.js
- Guess the number with React - what is the proper way of using state in that case
- What is the proper way of updating this Redux store state in React app
- What is the proper way of initializing nullable state in React/TypeScript apps?
- What is the proper way to access an object inside state using a key?
- What is the proper way to handle component's state in React?
- Problem accessing data of an array created from the state in Reactjs
- What is the proper way to make dependent api call in Reactjs Redux Redux-thunk
- What is the best way to add a value to an array in state
- What is the proper way to use React Memo with Flow?
- ReactJS : What is the best way to give keys in array element
- what is the proper way to publish a React component module in NPM without external dependencies inside?
- What is the proper way to enable the css prop in Emotion 11/Next js 10 apps
- What is the best way to implement undo state change (undo store/history implementation) in React Redux
- In React, what is the right way to update nested array state items
- What is the best practice to set initial state in reactjs constructor redux?
- Whats the proper way to have a form submit data in a stateless react component?
- What is the idiomatic way to use props in component composing in reactjs
- What is the proper way to duplicate componentDidMount with hooks?
More Query from same tag
- Sending input value to click handler in React
- Error: PostCSS plugin tailwindcss requires PostCSS 8(update v2 to v3)
- Property 'props' does not exist on type '{}' (trying to get access to props of children) - React Typescript
- Is there a way to use the condition of a ternary to be the value?
- Adding a custom network to MetaMask with http address isn't working using wallet_addEthereumChain
- Why I am getting error invalid hook call when I am calling it inside a function
- How to set state of other component inside an axios get method in react?
- How to resolve typescript errors for createContext in custom react component
- Unable to upload file from react to laravel using react hook form and ajax
- How to force an image to refresh
- How to check a condition before the render of the component happen?
- Have child change parent's state which is an array
- Wrapping h5 in Link tag made h5 dissappear
- Error: To use plugins requiring `addCSS` (e.g. keyframes, media queries), please wrap your application in the StyleRoot component
- Open link in new tab in react router programmatically
- ReactJS map onClick get value
- Show the latest labels in a bar chart with React.js using react-chartjs
- Gatsby useStaticQuery giving causing 'The result of this StaticQuery could not be fetched'. Query works in graphiql and on hot reload, not page load
- React context in MPA (one context for different apps)
- Cannot properly parse json string to JavaScript object
- Reset count function in counter app not setting count to 0
- React axios file upload failing - error "Multipart: Boundary not found"
- Destructing an object and using it - React prop
- On clicking on close button of page i want to clear all selectbox value
- Reacr-Admin, OData: how to filter a list by nested data
- Trying to return multiple values from react functional component method
- Ag-Grid - How to Set Border Bottom for the Last Row
- React switching lists race condition?
- React + fetch: adding extra characters and backslashes to my url
- How to make generic function for validation which return error mesages?