Функция не вызывается в ComponentDidMount - PullRequest
0 голосов
/ 20 мая 2018

Не совсем уверен, как двигаться дальше в этом.У меня (довольно) простая установка с react-router, почти все работает как положено - я получаю запросы и ответы между приложением и моим API - за исключением того, что у меня есть функция, которую я ожидаю запустить из функции жизненного цикла моего приложения componentDidMount, ноэто как-то не получилось ...

Вот довольно минималистичная версия моего кода:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Switch } from 'react-router';
import { connect } from 'react-redux';
import { authenticate, unauthenticate } from './actions/session';
import RouteAuthenticated from './RouteAuthenticated'; // Route if authenticated
import RedirectAuthenticated from './RedirectAuthenticated'; // Redirect to login if not authenticated
import Home from './Home';
import Login from './Login';
import Signup from './Signup';

class App extends Component {
  componentDidMount() {
    const token = localStorage.getItem('token'); // eslint-disable-line no-undef
    console.info(token);    // <====   Shows a token, great!
    console.info(this.props.authenticate.toString()); // Output below
    if (token) {
      console.info(`We have a token`); // <=== I get to here
      this.props.authenticate(); // <=== Never gets run...????
    } else {
      this.props.unauthenticate();
    }
  }
  render() {
    const { isAuthenticated, willAuthenticate } = this.props;
    const authProps = { isAuthenticated, willAuthenticate };
    return (
      <div className="App">
        <Header />
        <Switch>
          <RouteAuthenticated exact path="/" component={Home} {...authProps} />
          <RedirectAuthenticated exact path="/login" component={Login} {...authProps} />
          <RedirectAuthenticated exact path="/signup" component={Signup} {...authProps} />
        </Switch>
      </div>
    );
  }
}

App.propTypes = {
  authenticate: PropTypes.func.isRequired,
  unauthenticate: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
  willAuthenticate: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.isAuthenticated,
  willAuthenticate: state.willAuthenticate
});

const mapDispatchToProps = () => ({
  authenticate,
  unauthenticate
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

И, поскольку это казалось супер странным, я решил пойти дальше и просто убедиться, чтона самом деле была функцией для запуска.Я вставил строку console.info(this.props.authenticate.toString()); выше, и вот что я получаю, что выглядит нормально, за исключением того, что оно никогда не выполняется:

function authenticate() {
  return function (dispatch) {
    console.info("auth function");
    dispatch({
      type: 'AUTHENTICATION_REQUEST'
    });
    try {
      console.info("AUTHing");
      setCurrentUser(dispatch, _api2.default.get('is-auth'));
    } catch (e) {
      console.info("AUTH ERROR");
      localStorage.removeItem('token'); // eslint-disable-line no-undef
      window.location = '/login'; // eslint-disable-line no-undef
    }
  };
}

А вот оригинальная функция:

export const authenticate = () => (dispatch) => {
  console.info("auth function"); // <=== never called?
  dispatch({
    type: 'AUTHENTICATION_REQUEST'
  });
  try {
    console.info("AUTHing");
    setCurrentUser(dispatch, api.get('is-auth'));
  } catch (e) {
    console.info("AUTH ERROR");
    localStorage.removeItem('token');
    window.location = '/login';
  }
};

А в магазине:

import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import history from './history';
import reducers from './reducers';

const middleWare = [thunk, routerMiddleware(history)];
const createStoreWithMiddleware = applyMiddleware(...middleWare)(createStore);

const store = createStoreWithMiddleware(reducers);

export default store;

Есть идеи, что я могу попробовать отсюда?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...