React Redux Saga function never get executed - reactjs

Question

Here is the code
//REDUCER.js
import { call, take, fork } from 'redux-saga/effects';
import { request } from '../../utils';
export const LOGIN_REQUEST = "LOGIN_REQUEST";
const LOGIN_SUCCESS = "LOGIN_REQUEST";
const LOGIN_FAILED = "LOGIN_FAILED";
const initialState = { authenticated: false, loading: false };
export default function (state = initialState, action) {
switch (action.type) {
case LOGIN_REQUEST:
return { ...state, loading: true };
case LOGIN_SUCCESS:
return { ...state, loading: false, authenticated: true, user: action.payload };
case LOGIN_FAILED:
return { ...state, loading: false, };
default:
return { ...state }
}
}
export function loginRequest(loginData) {
return { type: LOGIN_REQUEST, loginData }
}
export function loginApi(formData) {
return new Promise((resolve, reject) => {
request.post('/login', formData)
.then(response => {
resolve(response)
})
.catch(error => reject(error));
})
}
export function* handleLogin(formData) {
try {
console.log('handleLogin');
const payload = yield call(loginApi, formData);
console.log(payload)
} catch (e) {
console.log('error ', e);
}
}
export function* watchLoginRequest() {
yield take(LOGIN_REQUEST, handleLogin);
}
//ROOTSAGA.js
import { all } from 'redux-saga/effects';
import { watchLoginRequest } from './modules/auth/reducer';
export default function* Root() {
yield all([
watchLoginRequest,
])
}
//store.js
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../rootReducer';
import rootSaga from '../rootSagas';
const history = createHistory();
const sagaMiddleware = createSagaMiddleware();
const middlewares = [
sagaMiddleware,
thunk,
routerMiddleware(history),
];
/* eslint-disable no-underscore-dangle */
const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(...middlewares)));
/* eslint-enable */
sagaMiddleware.run(rootSaga);
export default store;
Here is my component:
import { Button, Form, Icon, Input, Row } from 'antd';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { config } from '../../../utils';
import { loginRequest } from '../reducer';
import { Div, DivLogo } from '../styles';
const FormItem = Form.Item;
const formDecorator = Form.create();
const reduxConnect = connect(null, { loginRequest });
class Login extends Component {
static propTypes = {};
static defaultProps = {};
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(values);
this.props.loginRequest(values);
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<Div>
<DivLogo>
<span>{config.logoText}</span>
</DivLogo>
<Form onSubmit={this.handleSubmit}>
<FormItem hasFeedback>
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username' }],
})(
<Input
size="large"
prefix={<Icon type="user" style={{ fontSize: 13 }} />}
placeholder="Username" />,
)}
</FormItem>
<FormItem hasFeedback>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password' }],
})(
<Input
type="password"
size="large"
prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
placeholder="Password"
/>,
)}
</FormItem>
<Row>
<Button type='primary' htmlType="submit" size='large' loading={false}>
Login
</Button>
</Row>
</Form>
</Div>
);
}
}
export default reduxConnect(formDecorator(Login));
When I submit the form it will execute the loginRequest function. I've checked it execute successfully.
The problem is watchLoginRequest never run. It never get into the handleLogin function. The console.log never shown on console.
Any solution?

Answer 1

In your example, there is no "live process" circuit, and source code can be simplified. So, your snippet does only catch events with specific type and invokes callback. Effect takeEvery is default use case for this snippet
export function handleLogin() {
// Your definitive saga
}
// .....
export default function* Root() {
yield [takeEvery(LOGIN_REQUEST, handleLogin)]
}
More than that, don't mix saga handler and reducer. If you want to invoke some reducer from saga, just segregate actions name to REQUEST/RESPONSE format, and then catch all *_REQUEST events and put *_RESPONSE after Process Manager (saga) worker ends.