Не совсем уверен, как двигаться дальше в этом.У меня (довольно) простая установка с 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;
Есть идеи, что я могу попробовать отсюда?