ReactJs:在实现了 React 和 Redux 之间的链接的根组件中访问状态数据的正确方法是什么? [英] 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?
问题描述
免责声明:之前在stackoverflow上已经提到过这个错误，但我的情况不同.
我在用户登录时遇到了问题，我在这个 stackOverFlow 问题.邀你快去看看.
所以正如我在我的根文件中的那个问题中提到的，我有这个:
DISCLAIMER: This error has been mentioned on stackoverflow before but my case is different.
I have had a problem with the user login which I have explained in this stackOverFlow question. I invite you to go and quickly take a look.
So as I mentioned in that question in my root file I have this:
App.js
class App extends Component {
render() {
const authLinks = (
<Switch>
<Route
exact
path="/"
name="Login Page"
render={props => <Login {...props} />}
/>
<Route
exact
path="/404"
name="Page 404"
render={props => <Page404 {...props} />}
/>
<Route
exact
path="/500"
name="Page 500"
render={props => <Page500 {...props} />}
/>
<Route
path="/home"
name="Home"
render={props => <DefaultLayout {...props} />}
/>
</Switch>
);
const guestLinks = (
<Switch>
<Route
exact
path="/"
name="Login Page"
render={props => <Login {...props} />}
/>
<Route
exact
path="/register"
name="Register Page"
render={props => <Register {...props} />}
/>
<Route
exact
path="/404"
name="Page 404"
render={props => <Page404 {...props} />}
/>
<Route
exact
path="/500"
name="Page 500"
render={props => <Page500 {...props} />}
/>
</Switch>
);
const currentState = store.getState();
console.log(
"currentState.auth.isAuthenticated: ",
currentState.auth.isAuthenticated
);
return (
<Provider store={store}>
<HashRouter>
<React.Suspense fallback={loading()}>
{console.log(currentState.auth.isAuthenticated)}
{/* TODO: Not sure if this always works. If after the user logsin he gets a blank page and he has to reload to be redirected to home then
this way of routing may need to modified */}
{currentState.auth.isAuthenticated ? authLinks : guestLinks}
</React.Suspense>
</HashRouter>
</Provider>
);
}
}
有人告诉我我错误地访问了状态isAuthenticated:
I have been told that I am accessing the state isAuthenticated incorrectly:
{currentState.auth.isAuthenticated ? authLinks : guestLinks}
我应该使用 connect() 访问它.这实际上是我尝试的第一件事.它没有用.但是，我接受了他们的建议并再次尝试:
That I should access it by using connect(). That was actually the first thing I have tried. It didn't work. But, I took their advice and tried it again:
class App extends Component {
render() {
const authLinks = (
<Switch>
<Route
exact
path="/"
name="Login Page"
render={props => <Login {...props} />}
/>
<Route
exact
path="/404"
name="Page 404"
render={props => <Page404 {...props} />}
/>
<Route
exact
path="/500"
name="Page 500"
render={props => <Page500 {...props} />}
/>
<Route
path="/home"
name="Home"
render={props => <DefaultLayout {...props} />}
/>
</Switch>
);
const guestLinks = (
<Switch>
<Route
exact
path="/"
name="Login Page"
render={props => <Login {...props} />}
/>
<Route
exact
path="/register"
name="Register Page"
render={props => <Register {...props} />}
/>
<Route
exact
path="/404"
name="Page 404"
render={props => <Page404 {...props} />}
/>
<Route
exact
path="/500"
name="Page 500"
render={props => <Page500 {...props} />}
/>
</Switch>
);
const currentState = store.getState();
console.log(
"currentState.auth.isAuthenticated: ",
currentState.auth.isAuthenticated
);
return (
<Provider store={store}>
<HashRouter>
<React.Suspense fallback={loading()}>
{console.log(currentState.auth.isAuthenticated)}
{/* TODO: Not sure if this always works. If after the user logsin he gets a blank page and he has to reload to be redirected to home then
this way of routing may need to modified */}
{/* {currentState.auth.isAuthenticated ? authLinks : guestLinks} */}
{this.props.auth.isAuthenticated ? authLinks : guestLinks}
</React.Suspense>
</HashRouter>
</Provider>
);
}
}
App.propTypes = {
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
export default connect(mapStateToProps, null)(withRouter(App));
这给出了我提到的错误:
which gives the error I've mentioned:
Could not find "store" in the context of "Connect(withRouter(App))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(withRouter(App)) in connect options.
哪种有意义，因为商店是通过路由器传递根组件 App.js的.因此，不应以通过 connect 在 childComponents 中访问应用程序的相同方式访问应用程序的状态.所以我有两个问题:
问题 1: 为什么我会收到此错误?
问题 2: 在实现 redux 和 react 之间的链接的根组件中访问状态数据的正确方法是什么?
which kind of makes sense, since the store is passed root component App.js through the router. So the state of the app shouldn't be accessed in the same way it is accessed in childComponents through connect.
So I have two questions:
QUESTION 1: Why am I getting this error?
QUESTION 2: What is the right way of accessing the state data inside the root component where the link between the redux and react is implemented?
推荐答案
问题 1:
我相信你必须先把 withRouter 包裹起来.
I believe you have to wrap withRouter first.
试试这个:
import { connect } from "react-redux";
import { withRouter } from "react-router";
export default withRouter(connect(mapStateToProps, null)(App));
问题 2:您正在将状态映射到道具，因此从组件中的状态访问 auth 的正确方法是 this.props.auth
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
尝试在你的渲染中使用 console.log(this.props) 你就会明白我的意思.还要检查 https://react-redux.js.org/api/connect
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
希望能帮到你
这篇关于ReactJs:在实现了 React 和 Redux 之间的链接的根组件中访问状态数据的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
