使用Redux访问isAuthenticated道具

Question

我认为这是一个相对容易的问题，然而，我对使用Redux有点困惑。基本上，我正在尝试创建一个PrivateRoute组件，但我不知道如何访问isAuthenticated道具。感谢您的帮助。

更新

路径：App.js

class App extends Component {
componentDidMount() {
store.dispatch(loadUser());
}
render() {
return (
<Provider store={store}>
<Router>
<Header />
<Switch>
<Route exact path="/login">
<ErrorBoundary>
<LoginPage />
</ErrorBoundary>
</Route>
<PrivateRoute path="/purchase_order">
<p>Test</p>
</PrivateRoute>
</Switch>
</Router>
</Provider>
);
}
}

路径：PrivateRoute

const PrivateRoute = ({ children, ...rest }) => (
<Route
{...rest}
render={({ location }) =>
this.props.isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: {
from: location
}
}}
/>
)
}
/>
);
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

Answer 1

你做得很好，你也为PrivateRoute构建了很好的功能组件，但在访问道具时出现了错误，使用this.props.isAuthenticated时，第一件事this.props仅在基于类的React组件中使用，或者你可以将其用作(props.isAuthenticated假设你已经在PrivateRouteReact功能组件中传递了isAutheticated prop(。

您已完成的要点-

1. 您已将全局状态连接到此PrivateRoute功能组件
2. 您已经从结构上定义了PrivateRoute功能组件

Redux状态-

state: {
auth: {userId: 'ob2-51-hw-s124' // any random string based on your API},
otherReducer: {...}
}

需要完成的要点-

1. 从react-redux模块导入connect
2. 从react-router-dom模块导入Route、Redirect

最终代码

AppRouter.js

// module import
import LandingPage from '...';
import NotFoundPage from '...';
import DashBoardPage from '...';
import LoginPage from '...';

// React functional component that can be imported in App.js
const AppRouter = () => (
<Router history={history}>
<div>
<Switch>
<PublicRoute path="/" exact={true}>
<LandingPage />
</PublicRoute>
<PrivateRoute path="/dashboard">
<DashboardPage />
</PrivateRoute>
<PrivateRoute path="/login">
<LoginPage />
</PrivateRoute>
<PublicRoute path="/help" >
<HelpPage />
</PublicRoute>
<Route>
<NotFoundPage />
</Route>
</Switch>
</div>
</Router>
);
export default AppRouter;

---

PrivateRoute.js

// module import
import React form 'react';
import { connect }  from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

// React functional PrivateRoute component
export const PrivateRoute = ({
auth,
children,
...rest
}) => {
const isAuthenticated = !!auth.userId; // converting auth.userId(typeof string) to false/true(typeof boolean)
return (
<Route {...rest} component={(props) => (
isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: {
from: props.location 
}
}}
/>
)
)} 
/>
);
}

// redux connect
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

Answer 2

mapStateToProps函数显示您将state.auth值放入auth道具

您使用的是函数组件，因此没有this。

因此，假设isAuthenticated是auth的一个属性，那么：

rest.auth.isAuthenticated否则：rest.auth

你也可以从道具中销毁auth并直接访问它。因为你不需要把它传递到路由中。

const PrivateRoute = ({ children, auth, ...rest }) => (
<Route
{...rest}
render={({ location }) =>
auth.isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: {
from: location
}
}}
/>
)
}
/>
);
const mapStateToProps = (state) => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);