reactjs payload shows undefined - reactjs

Question

I am kind of learning how react js and its workflows such as redux work out.. In some cases I have no idea why I can not get response from API such as below my code when I request data I can nott get payload it is undefined any suggestion ? and may I know what cause it is show that payload is undefined.
RegisterAction.js
import { REGISTER_REQUEST, REGISTER_SUCCESS, REGISTER_FAILURE } from './types';
import { authService } from '../services/authService';
export function register(user) {
return dispatch => {
dispatch(request(user));
authService.register(user)
.then(
user => { dispatch(success()); },
error => { dispatch(failure(error)); }
);
};
function request(user) {
return { type: REGISTER_REQUEST, payload: user }
}
function success(user) {
return { type: REGISTER_SUCCESS, payload: user }
}
function failure(error) {
return { type: REGISTER_FAILURE, error }
}
}
RegistrationReducer.js
import { REGISTER_REQUEST, REGISTER_SUCCESS, REGISTER_FAILURE } from '../actions/types';
const initialState = {
user: [],
registerigIn: false,
registeredIn: false
}
export default function (state = initialState, action) {
console.info("reducer:", "state is:", state, "action is:", action.payload)
switch (action.type) {
case REGISTER_REQUEST:
return {
...state,
user: action.payload,
registering: true,
};
case REGISTER_SUCCESS:
return {
...state,
user: action.payload,
registered: true
};
case REGISTER_FAILURE:
return {
registering: false
};
default:
return state
}
}
AuthService.js
import { authHeader } from '../helpers/authHeader';
export const authService = {
register
};
function register(user) {
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(user)
};
return fetch(`https://reqres.in/api/register`, requestOptions).then(handleResponse);
}
function handleResponse(response) {
return response.text().then(text => {
const data = text && JSON.parse(text);
if (!response.ok) {
if (response.status === 401) {
// auto logout if 401 response returned from api
logout();
// location.reload(true);
}
const error = (data && data.message) || response.statusText;
return Promise.reject(error);
}
return data;
});
}
View
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { register } from '../../actions/registrationActions'
import './Authentication.css'
class Registration extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
}
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this)
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
const user = this.state;
console.info("register Data:", user)
this.props.register(user)
}
render() {
return (
<React.Fragment>
< div className="text-center" >
<div className="logo">Register Page</div>
<div className="login-form-1">
<form id="register-form" className="text-left" onSubmit={this.onSubmit}>
<div className="login-form-main-message"></div>
<div className="main-login-form">
<div className="login-group">
<div className="form-group">
<label htmlFor="reg_surname" className="sr-only">Email</label>
<input
type="text"
className="form-control"
id="email"
name="email"
onChange={this.onChange}
placeholder="email" />
</div>
<div className="form-group">
<label htmlFor="reg_password" className="sr-only">Password</label>
<input type="password"
className="form-control"
id="password"
name="password"
onChange={this.onChange}
placeholder="" />
</div>
</div>
<button
type="submit"
title="Gönder"
className="login-button"><i className="fa fa-chevron-right"></i>
</button>
</div>
<div className="etc-login-form">
<p>Hesabiniz var mı? Giriş yap</p>
</div>
</form>
</div>
</div >
</React.Fragment>
)
}
}
Registration.propTypes = {
register: PropTypes.func.isRequired
}
export default connect(null, { register })(Registration)