如何在 react-router ProtectedRoute 中访问 Redux 状态？答案

【问题标题】：How do access Redux state in react-router ProtectedRoute?如何在 react-router ProtectedRoute 中访问 Redux 状态？
【发布时间】：2020-11-05 03:42:43
【问题描述】：

我想根据用户是否登录来限制某些路由的访问。

目前，我有：

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
import { Provider } from 'react-redux';
import ProtectedRoute from './ProtectedRoute';
import configureStore, { history } from './configureStore';

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <ProtectedRoute exact path="/" component={MyContainer1} />
                <ProtectedRoute exact path="/user" component={MyContainer2} />
                <Route exact path="/login" component={MyContainer3} />
                <ProtectedRoute exact path="/setup" component={MyContainer4} />
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'),
);

ProtectedRoute.tsx

import React from 'react';
import { Redirect, Route } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, ...rest }: any) => {
    const isLoggedIn = true; // How do I get the Redux state here?
    
    return (
        <Route
            {...rest}
            render={(props) =>
                isLoggedIn ? (
                    <Component {...props} />
                ) : (
                    <Redirect
                        to={{
                            pathname: '/login',
                            state: { from: props.location },
                        }}
                    />
                )
            }
        />
    );
};

export default ProtectedRoute;

我这里也有一个 Redux 全局的 reducer 存储：

reducer.ts

const createRootReducer = (history: History<any>) =>
    combineReducers({
        router: connectRouter(history),
        login: LoginReducer,
        setup: SetupReducer,
    });

export default createRootReducer;

在我的LoginReducer 中，我有一个标记来跟踪用户是否已登录。现在，如何在我的ProtectedRoute.tsx 代码中访问该标记？在使用普通组件时，我会创建一个带有 mapStateToProps 和 mapDispatchToProps 的容器，并以这种方式访问 Redux 状态。我不确定是否可以或等效地在 ProtectedRoute 的功能组件中执行此操作。

【问题讨论】：

你可以在你的ProtectedRoute组件中使用const isLoggedIn = useSelector(state => state.login.isLoggedIn)

标签： reactjs redux react-router-dom

【解决方案1】：

您应该能够在您的ProtectedRoute 功能组件中使用useSelector 来访问redux 存储。

像这样 -

const isLoggedIn = useSelector(state => state.login.isLoggedIn)

这是一个关于如何在您的应用程序中使用 useSelector 的示例代码框 - https://codesandbox.io/s/redux-useselector-usedispatch-sample-8l0sv?file=/src/Counter.js:504-512

【讨论】：