Redux Action not hitting Reducer [React] - reactjs

Question

As the title says, I'm having issues with my React app where I'm able to hit the Redux Action, but it does not hit the Reducer after that. I've looked at a past project I worked on, as well as several posts on here, but I'm not certain what is wrong with my code that's preventing the Action from hitting the reducer. I've pasted the code below, but please let me know if there's anything else I can provide.
index.js:
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers/usersRedcuers';
import './index.css';
const store = createStore(reducer);
ReactDom.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root')
)
App.jsx Component:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Auth from '../modules/Auth';
import { login } from '../actions/usersActions';
class App extends Component {
constructor(props) {
super(props);
this.state = {
auth: null,
token: '',
password: '',
username: '',
}
const {
login,
} = this.props;
}
loginHandler() {
const { password, username } = this.state;
const auth = Auth.isUserAuthenticated()
const token = null;
login(auth, token, password, username);
};
render() {
return (
<div className="App">
<div className="title">
Recipe Box
</div>
<div className="form-inline login-form">
<div className="form-group">
<input
className="form-control"
onChange={e => this.setState({ username: e.target.value })}
placeholder="Username"
/>
<input
className="form-control"
onChange={e => this.setState({ password: e.target.value })}
placeholder="Password"
type="password"
/>
</div>
<button
className="btn btn-success"
onClick={() => this.loginHandler()}
type="button"
>
Login
</button>
</div>
</div>
);
}
}
function mapDispatchToProps(dispatch) {
console.log('dispatching:', dispatch)
return bindActionCreators({login}, dispatch);
}
function mapStateToProps(state) {
return { state }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
Action Constants:
// AUTH
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';
// USERS
export const ADD_USER = 'ADD_USER';
export const DELETE_USER = 'DELETE_USER';
export const UPDATE_USER = 'UPDATE_USER';
Actions:
import {
ADD_USER,
DELETE_USER,
LOGIN,
LOGOUT,
UPDATE_USER,
} from '../constants/constants';
export const login = (auth, token, password, username) => {
const action = {
type: LOGIN,
auth,
token,
password,
username,
}
console.log('login action:', action)
return action;
}
Reducer:
import {
LOGIN,
LOGOUT,
} from '../constants/constants';
const login = (action) => {
console.log('hitting B')
const { auth, token, password, username } = action;
return {
auth: auth,
token: token,
password: password,
username: username,
}
}
const authControl = (state = [], action) => {
console.log('hitting C: ', action)
let authControl = null;
switch(action.type) {
case LOGIN:
authControl = [...state, login(action)]
console.log('authControl:'. authControl);
return authControl;
default:
console.log('hittibbng default', state)
return state;
}
}
export default authControl;

Answer 1

In the App.jsx component you should use the action passed as a prop to the component and not call the action directly.
The loginHandler should look like this:
loginHandler() {
const { password, username } = this.state;
const auth = Auth.isUserAuthenticated()
const token = null;
this.props.login(auth, token, password, username);
};

Answer 2

Seems like you have missed to dispatch to the reducer
import {
ADD_USER,
DELETE_USER,
LOGIN,
LOGOUT,
UPDATE_USER,
} from '../constants/constants';
export const login = (auth, token, password, username) => dispatch => {
const action = {
type: LOGIN,
auth,
token,
password,
username,
}
console.log('login action:', action)
dispatch(action)
}