路由设置文件中存储中的访问状态 [react-router v4 + redux-thunk]

Question

我目前正在开发一个 ReactJS Web 应用程序（新手）。我正在使用 react-router v4 和 redux-thunk。

我想知道如何从我的routes.js 文件中的商店访问状态的当前值。从商店返回的值是“真”或“假”。我想访问该状态值，以验证 routes.js 文件中常量 PrivateRoute 中的“auth_status === true”条件。

简而言之，我的authActions.js 文件中名为verifyAuth 的操作是从我的Login.js 文件中调度的。有效载荷从那里设置为“true”或“false”。我想从我的authReducer.js 文件中检索isAuthenticated。

来自我的文件index.js（主）、routes.js、index.js（减速器）和authReducer.js 的样本：

index.js（主）文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Routes from './main/routes';
import store from './main/store';

ReactDOM.render(
  <Provider store={store}>
    <Routes/>
  </Provider>,
  document.getElementById('root')
);

routes.js文件：

    import React from 'react';
    import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
    import Login from './login';
    import App from './App';
    import MainHome from '../pages/home/home';

    const PrivateRoute = ({ component: Component, layout: Layout, ...rest }) => (
      <Route {...rest} render={(props) => (
        **auth_status === true**
        ? <Layout>
            <Component {...props}/>
          </Layout>
        : <Redirect to={{
          pathname: '/'
        }}/>
      )}/>
    );

    const Routes = () => (
      <Router>
        <Switch>
          <Route exact path="/" component={Login}/>
          <PrivateRoute path="/home" layout={App} component={MainHome}/>
        </Switch>
      </Router>
    );

export default Routes;

index.js（减速器）文件：

import { combineReducers } from 'redux';
import authReducer from './authReducer';

export default combineReducers({
  auth: authReducer
});

authReducer.js文件：

import { VERIFY_AUTH } from '../actions/actionsType';

const initialState = {
  isAuthenticated: false
};

export default function (state = initialState, action) {
  switch (action.type) {
    case VERIFY_AUTH: {
      return {
        ...state,
        isAuthenticated: action.payload }
    }
    default: {
      return state;
    }
  }
};

谢谢！

Answer 1

首先你需要将你的组件连接到 Redux Store。首先导入connect方法：

 import connect from "react-redux"

然后使用 connect 方法将您的 PrivateRoute 连接到 Store。

PrivateRoute = connect(mapStateToProps)(PrivateRoute )

然后创建 mapStateToProps 方法。它将“映射”状态以获取您需要的道具。

const mapStateToProps = state => {
  return {
    auth_status : state.auth.isAuthenticated
  }
}

从现在开始，您的组件 PrivateRoute 将可以访问属性“auth_status”，该属性在您商店的 auth 属性中具有您的“isAuthenticated”值。

希望对你有帮助。