Redux Saga seems to be making an unknown API call? - reactjs

Question

I have a login form (built with Ant Design's Form). This is all hooked up to Redux Saga. In this Saga, I am making an API call, and everything seems to be working, but mysteriously, when I dispatch any other action using put, there seems to be an extra mysterious API call that fails because it's not reading from the form correctly.
My Form:
import React from 'react';
import { connect } from 'react-redux';
import { Form, Icon, Input, Button } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { loginRequest, ICredentials } from '../redux/auth';
import { FormContainer, LoginContainer } from './styles';
type Props = {
login: (data: ICredentials) => {};
}
class LoginForm extends React.Component<Props & FormComponentProps> {
handleSubmit = (e: React.SyntheticEvent) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
this.props.login(values)
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<FormContainer>
<Form className="login-form">
<Form.Item>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
)}
</Form.Item>
<LoginContainer>
<Button type="primary" htmlType="submit" className="login-form-button" onClick={this.handleSubmit}>
Log in
</Button>
</LoginContainer>
</Form>
</FormContainer>
);
}
}
const mapDispatchToProps = { login: loginRequest };
const WrappedLoginForm = Form.create()(LoginForm);
export default connect(null, mapDispatchToProps)(WrappedLoginForm);
My Action:
export const loginRequest = (data: ICredentials): Action => ({
type: Actions.LoginRequest,
payload: data,
});
My Reducer:
const initialState: State = {
loading: false,
}
const reducer: Reducer<State> = (state = initialState, action: Actions & any) => {
switch (action.type) {
case Actions.LoginRequest:
return {
...state,
loading: true,
}
case Actions.LoginSuccess:
return {
...state,
loading: false,
}
default:
return state;
}
}
export default reducer;
my Sagas:
import { all, call, takeLatest, put } from 'redux-saga/effects';
import axios from 'axios';
import { push } from 'react-router-redux'
import message from 'antd/lib/message';
import { loginRequest, LoginRequest, loginSuccess } from './actions';
import { ICredentials } from './model';
import { AccessToken } from '../../storage/token';
const login = (payload: ICredentials) => axios({
method: 'POST',
url: //....
data: {
username: payload.username,
password: payload.password,
grant_type: 'password',
scope: 'admin,super_admin',
},
headers: {
'Content-Type': 'application/json',
Authorization: //....
}
});
function* loginSaga({ payload }: LoginRequest) {
try {
const data = yield call(login, payload);
AccessToken.set({ ...data.data, retrieved_at: Date.now() / 1000 })
yield call(message.success, 'Welcome!');
// yield all([
// put(loginSuccess()),
// put(push('/'))
// ]);
// yield put(loginSuccess());
// yield put(push('/'))
} catch (err) {
console.log(err)
}
}
function* watcherSaga() {
yield takeLatest(loginRequest, loginSaga)
}
export default watcherSaga;
In this saga, when the AccessToken is set, I ideally want to use react-router-redux to push the user into another route. However, it seems that there's a mysterious API call that's being made and it fails because there are no credentials being passed.
Pictured here is the API call coming back with a 200, but then comes back with a 400 because it's looking for username again
I suspect that it's the form that may be at fault, and though I don't want to switch to another form library, I feel like I may have to do that. Does anyone have any thoughts?

Answer 1

takeLatest ideally must be provided with a string. In your case a function is passed which returns an object.
takeLatest does not check the contents(i.e keys and values) of the object. That is something you would have to do on your own.
So, no matter what action is dispatched the login saga is started, which calls the login api, with an inappropriate payload and hence the error.
So, to avoid the error you could pass a string to takeLatest or in other words initiate the login saga only when Actions.LoginRequest(an action of type Actions.LoginRequest) is dispatched.
yield takeLatest(Actions.LoginRequest, loginSaga)