Как подписаться на действие Redux в компоненте React
Я пытаюсь выяснить, как я могу подписаться на действие Redux в компоненте React. Я ничего не нашел в Google, поэтому я открываю здесь вопрос, чтобы посмотреть, может ли кто-нибудь мне помочь.
Когда пользователь пытается войти, я отправляю loginRequestAction() тогда я справлюсь с этим redux-saga (проверьте мой saga.js файл ниже), наконец, если все в порядке, я отправляю LOGIN_REQUEST_SUCCESS действие.
То, что я хотел бы сделать здесь, найти способ подписаться на LOGIN_REQUEST_SUCCESS действие в моем компоненте React, поэтому после получения действия я могу обновить локальное состояние и использовать свой компонент React history.push() перенаправить пользователя на страницу панели инструментов.
Это мой код компонента:
/**
*
* LoginPage
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import { Container, Row, Col, Button, Alert } from 'reactstrap';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { ReactstrapInput } from 'reactstrap-formik';
import reducer from './reducer';
import saga from './saga';
import { loginRequestAction } from './actions';
import { makeSelectLoginPage } from './selectors';
import { makeSelectIsLogged } from '../Auth/selectors';
const LoginSchema = Yup.object().shape({
userIdentifier: Yup.string().required('Required'),
password: Yup.string().required('Required'),
});
/* eslint-disable react/prefer-stateless-function */
export class LoginPage extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
formMsg: {
color: '',
text: '',
},
};
}
componentDidMount() {
const { history, isLogged } = this.props;
if (isLogged) history.push('/dashboard/index');
}
render() {
const { formMsg } = this.state;
const { onLoginFormSubmit } = this.props;
return (
<div>
<Helmet>
<title>Sign in</title>
<meta name="description" content="Description of LoginPage" />
</Helmet>
<Container className="auth-container">
<div className="form-page">
<Row>
<Col className="text-center">
<img
className="mb-4"
src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg"
alt=""
width="72"
height="72"
/>
</Col>
</Row>
<Row>
<Col className="text-center">
{' '}
<h1 className="h3 mb-3 font-weight-normal">Authentication</h1>
<Alert
color={formMsg.color}
role="alert"
className={formMsg.text ? '' : 'd-none'}
>
<strong>{formMsg.text}</strong>
</Alert>
</Col>
</Row>
<Formik
initialValues={{
userIdentifier: '',
password: '',
}}
validationSchema={LoginSchema}
onSubmit={onLoginFormSubmit}
>
{({ isSubmitting }) => (
<Form>
<Field
component={ReactstrapInput}
name="userIdentifier"
type="userIdentifier"
placeholder="john@acme.com"
label="E-mail address"
/>
<Field
component={ReactstrapInput}
name="password"
type="password"
placeholder="Password"
label="Password"
/>
<div>
<Button
type="submit"
block
size="lg"
color="primary"
disabled={isSubmitting}
>
<FontAwesomeIcon
pulse
icon={faSpinner}
className={isSubmitting ? 'mr-2' : 'd-none'}
/>
Log in to access
</Button>
</div>
</Form>
)}
</Formik>
<Link to="/auth/reset">
<Button size="sm" color="secondary" block className="mt-2">
Forgot password?
</Button>
</Link>
<p className="mt-5 mb-3 text-center">
<Link to="/auth/register">
Don't have an account? Sign up
</Link>
</p>
</div>
</Container>
</div>
);
}
}
LoginPage.propTypes = {
isLogged: PropTypes.bool,
history: PropTypes.object,
onLoginFormSubmit: PropTypes.func,
};
const mapStateToProps = createStructuredSelector({
loginpage: makeSelectLoginPage(),
isLogged: makeSelectIsLogged(),
});
function mapDispatchToProps(dispatch) {
return {
onLoginFormSubmit: values => dispatch(loginRequestAction(values)),
};
}
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
const withReducer = injectReducer({ key: 'loginPage', reducer });
const withSaga = injectSaga({ key: 'loginPage', saga });
export default compose(
withReducer,
withSaga,
withConnect,
)(LoginPage);
Это мой файл saga.js:
import { put, call, takeLatest } from 'redux-saga/effects';
import {
LOGIN_REQUEST,
LOGIN_REQUEST_SUCCESS,
LOGIN_REQUEST_FAILED,
} from './constants';
import { AuthApi } from '../../api/auth.api';
export function* loginRequest(action) {
const { userIdentifier, password } = action.values;
try {
const tokens = yield call(AuthApi.login, userIdentifier, password);
yield put({ type: LOGIN_REQUEST_SUCCESS, tokens });
} catch (err) {
let errMsg;
switch (err.status) {
case 403:
errMsg = 'Invalid credentials';
break;
case 423:
errMsg = 'Account desactivated';
break;
default:
errMsg = `An server error ocurred. We have been notified about this error, our devs will fix it shortly.`;
break;
}
yield put({ type: LOGIN_REQUEST_FAILED, errMsg });
}
}
export default function* defaultSaga() {
yield takeLatest(LOGIN_REQUEST, loginRequest);
}
PS Я исхожу из этой проблемы GitHub: https://github.com/react-boilerplate/react-boilerplate/issues/2360 (Пожалуйста, посмотрите на это, поскольку есть возможное решение, но ИМХО, я думаю, что это не так правильный путь).
2 ответа
Как правило, вы никогда не "подписываетесь" на действия Redux в компонентах, поскольку это нарушает некоторые декларативные преимущества React. Большую часть времени вы будете просто connect() в состояние Redux через реквизиты и просто рендеринг на основе тех. Подписка на действия и последующий вызов функций маршрутизации в ответ является обязательным программированием, а не декларативным, поэтому вам следует избегать этого внутри компонентов.
Поэтому при работе с сагами у вас есть несколько вариантов для такого сценария. Вместо испускания LOGIN_REQUEST_SUCCESS из вашей саги вы можете просто протолкнуть новый маршрут из самой саги:
yield call(push, '/foo')
Или в качестве альтернативы поддерживать authenticated: boolean свойство в вашем состоянии Redux, переверните его true в саге, когда пользователь входит в систему, а затем использует ее для условного рендеринга реакции-маршрутизатора <Redirect /> в вашем компоненте (или, возможно, условно отрисовывать все аутентифицированное дерево вашего приложения, до вас).
Честно говоря, я думаю, что ответ в GitHub имеет смысл. Вы подписываете действие рассылки в redux с помощью редуктора. и редуктор, отвечающий за настройку состояния редукции и возврат его в ваш компонент с помощью функции соединения.
Добавление свойства флага с именем 'loginSuccess' или чего-либо еще и передача вам компонента не вызовет проблем с производительностью, с моей точки зрения, потому что именно так работает избыточная работа с реакцией.