Access isAuthenticated prop с помощью Redux

Question

Я думаю, что это относительно простая проблема, однако я немного запутался, используя Redux. По сути, я пытаюсь создать компонент PrivateRoute и не могу понять, как получить доступ к проповеди isAuthenticated. Помощь приветствуется.

ОБНОВЛЕНИЕ

Путь: App.js

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    return (
      <Provider store={store}>
        <Router>
          <Header />
          <Switch>
            <Route exact path="/login">
              <ErrorBoundary>
                <LoginPage />
              </ErrorBoundary>
            </Route>

            <PrivateRoute path="/purchase_order">
              <p>Test</p>
            </PrivateRoute>
          </Switch>
        </Router>
      </Provider>
    );
  }
}

Путь: PrivateRoute

const PrivateRoute = ({ children, ...rest }) => (
      <Route
        {...rest}
        render={({ location }) =>
          this.props.isAuthenticated ? (
            children
          ) : (
            <Redirect
              to={{
                pathname: '/login',
                state: {
                  from: location
                }
              }}
            />
          )
        }
      />
    );

    const mapStateToProps = (state) => ({
      auth: state.auth
    });

    export default connect(mapStateToProps)(PrivateRoute);

Answer 1

Вы отлично справились, вы также очень хорошо структурировали функциональный компонент для PrivateRoute, но при доступе к реквизиту есть ошибка, и при использовании в качестве this.props.isAuthenticated, первое, что this.props используется только и только в основанный на классах компонент React или вы можете использовать его как (props.isAuthenticated предполагается, что вы прошли isAutheticated prop в PrivateRoute функциональный компонент React).

набранные вами очки -

1. Вы подключили свое глобальное состояние к этому функциональному компоненту PrivateRoute.
2. Вы структурно определили свой функциональный компонент PrivateRoute.

Состояние Redux -

state: {
  auth: {userId: 'ob2-51-hw-s124' // any random string based on your API},
  otherReducer: {...}
}

Точки, которые необходимо выполнить -

1. импорт connect из модуля react-redux.
2. импорт Route, Redirect из модуля react-router-dom.

Итоговый код

AppRouter. js

// module import
import LandingPage from '...';
import NotFoundPage from '...';
import DashBoardPage from '...';
import LoginPage from '...';


// React functional component that can be imported in App.js
const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <PublicRoute path="/" exact={true}>
          <LandingPage />
        </PublicRoute>
        <PrivateRoute path="/dashboard">
          <DashboardPage />
        </PrivateRoute>
        <PrivateRoute path="/login">
          <LoginPage />
        </PrivateRoute>
        <PublicRoute path="/help" >
          <HelpPage />
        </PublicRoute>
        <Route>
          <NotFoundPage />
        </Route>
      </Switch>
    </div>
  </Router>
);
export default AppRouter;

---

PrivateRoute. js

// module import
import React form 'react';
import { connect }  from 'react-redux';
import { Route, Redirect } from 'react-router-dom';


// React functional PrivateRoute component
export const PrivateRoute = ({
  auth,
  children,
  ...rest
}) => {

  const isAuthenticated = !!auth.userId; // converting auth.userId(typeof string) to false/true(typeof boolean)

  return (
    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            children
          ) : (
            <Redirect
              to={{
                pathname: '/login',
                state: {
                  from: props.location 
                }
              }}
            />
          )
      )} 
    />
  );
}


// redux connect
const mapStateToProps = (state) => ({
  auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

Answer 2

Ваша функция mapStateToProps показывает, что вы вводите значение state.auth в auth prop

Вы используете функциональный компонент, поэтому this.

нет. Итак, если предположить, что isAuthenticated является свойством auth, тогда:

rest.auth.isAuthenticated в противном случае: rest.auth

Вы также можете деструктурировать auth из реквизитов и получить прямой доступ к нему. Так как вам не нужно пропускать его в маршрут.

const PrivateRoute = ({ children, auth, ...rest }) => (
  <Route
    {...rest}
    render={({ location }) =>
      auth.isAuthenticated ? (
        children
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: {
              from: location
            }
          }}
        />
      )
    }
  />
);

const mapStateToProps = (state) => ({
  auth: state.auth
});

export default connect(mapStateToProps)(PrivateRoute);