【发布时间】：2018-10-01 12:10:31
【问题描述】：
我试图弄清楚如何在 React 组件中订阅 Redux 操作。 我在 Google 上没有找到任何东西，所以我在这里打开一个问题，看看是否有人可以帮助我。
当用户尝试登录时，我发送一个loginRequestAction()，然后我使用redux-saga 处理它（查看下面我的saga.js 文件），最后如果一切正常，我发送LOGIN_REQUEST_SUCCESS 操作。
我想在这里做的是找到一种方法来订阅我的 React 组件中的 LOGIN_REQUEST_SUCCESS 操作，这样一旦收到操作，我就可以更新我的 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);
}
附：我来自这个 GitHub 问题：https://github.com/react-boilerplate/react-boilerplate/issues/2360（请查看它，因为有可能的解决方案，但恕我直言，我认为这不是正确的方法）。
【问题讨论】：
-
如果有人来自 Google 试图解决类似的问题并阅读此内容，我所做的就是遵循 Jed Richards 的建议。我还在做更多的事情：当一个组件从 DOM 中删除时，我
dispatchcomponentWillUnmount中的reset操作以清除 Redux 状态，因此它释放不会在其他部分使用的状态的应用程序，是无用的。
标签： javascript reactjs redux redux-saga react-boilerplate