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

Question

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

我想知道如何从我的 routes.js 文件中的商店访问状态的当前值。从商店返回的值为 "true" 或 "false"。我想访问该状态值，以验证 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"

然后使用连接方法将您的 PrivateRoute 连接到商店。

PrivateRoute = connect(mapStateToProps)(PrivateRoute )

然后创建 mapStateToProps 方法。它将"map"状态获取你需要的道具。

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

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

希望对您有所帮助。

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

Access State in Store From Routing Setup File [react-router v4 + redux-thunk]

reactjs

redux

redux-thunk

react-redux

react-router-v4