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

Question

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

我想知道如何从我的routes.js文件中的商店访问状态的当前值。 从存储返回的值是“ true”或“ false”。 我想访问该状态值，以便在我的routes.js文件中的恒定PrivateRoute中验证“ auth_status === true”条件。

简而言之，从我的authActions.js文件中调度了我Login.js文件中一个名为verifyAuth的操作。 有效负载从此处设置为“ true”或“ false”。 我想从我的authReducer.js文件中检索isAuthenticated 。

我的文件index.js （主要）， routes.js ， index.js （ routes.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连接到商店。

PrivateRoute = connect(mapStateToProps)(PrivateRoute )

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

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

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

希望对您有所帮助。