從路由設置文件[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”的值。

希望對您有所幫助。