Reducer in redux is not activating - reactjs

Question

I am trying to update state each time I type into an input. The action creator is firing but the reducer is not and I am not sure why. Below is the component and the reducer file. I have commented where the console.log works and where is does not. Some suggestions are greatly appreciated, thanks in advance.
//Component
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import { connect } from "react-redux";
import {
updateName,
updateAddress,
updateCity,
updateState,
updateZip
} from "../../redux/reducers/reducer";
class StepOne extends Component {
render() {
return (
<div>
<div className="name">
<h3>Property Name</h3>
<input
name="name"
placeholder="Name"
onChange={e => updateName(e.target.value)}
/>
</div>
<div className="address">
<h3>Address</h3>
<input
name="address"
placeholder="Address"
onChange={e => updateAddress(e.target.value)}
/>
</div>
<div className="city">
<h3>City</h3>
<input
name="city"
placeholder="City"
onChange={e => updateCity(e.target.value)}
/>
</div>
<div className="state">
<h3>State</h3>
<input
name="state"
placeholder="State"
onChange={e => updateState(e.target.value)}
/>
</div>
<div className="zip">
<h3>Zip</h3>
<input
name="zip"
placeholder="Zip"
onChange={e => updateZip(e.target.value)}
/>
</div>
<Link to="/wizard/step_two">
<button onClick={console.log(this.props)}>Next Step</button>
</Link>
</div>
);
}
}
const mapStateToProps = state => {
return {
state
};
};
export default connect(
mapStateToProps,
{
updateName,
updateAddress,
updateCity,
updateState,
updateZip
}
)(StepOne);
//Reducer
const initialState = {
name: "",
address: "",
city: "",
state: "",
zip: 0,
image: "",
monthly_mortgage: 0,
desired_rent: 0,
houses: []
};
const NAME_INPUT = "NAME_INPUT";
const ADDRESS_INPUT = "ADDRESS";
const CITY_INPUT = "CITY_INPUT";
const STATE_INPUT = "STATE_INPUT";
const ZIP_INPUT = "ZIP_INPUT";
const IMAGE_INPUT = "IMAGE_INPUT";
const MORTGAGE_INPUT = "MORTGAGE_INPUT";
const DESIRED_RENT_INPUT = "DESIRED_RENT_INPUT";
function reducer(state = initialState, action) {
console.log("REDUCER HIT: Action ->", action); // console.log does not work
switch (action.type) {
case NAME_INPUT:
return { ...state, name: action.payload };
case ADDRESS_INPUT:
return { ...state, address: action.payload };
case CITY_INPUT:
return { ...state, city: action.payload };
case STATE_INPUT:
return { ...state, state: action.payload };
case ZIP_INPUT:
return { ...state, zip: action.payload };
case IMAGE_INPUT:
return { ...state, image: action.payload };
case MORTGAGE_INPUT:
return { ...state, monthly_mortgage: action.payload };
case DESIRED_RENT_INPUT:
return { ...state, desired_rent: action.payload };
default:
return state;
}
}
export function updateName(name) {
console.log(name); // console.log is working
return {
type: NAME_INPUT,
payload: name
};
}
export function updateAddress(address) {
return {
type: ADDRESS_INPUT,
payload: address
};
}
export function updateCity(city) {
return {
type: CITY_INPUT,
payload: city
};
}
export function updateState(state) {
return {
type: STATE_INPUT,
payload: state
};
}
export function updateZip(zip) {
return {
type: ZIP_INPUT,
payload: zip
};
}
export default reducer;
//Store
import { createStore } from "redux";
import reducer from "./reducers/reducer";
export default createStore(reducer);

Answer 1

You are using your action creators directly from import, but for them to have the full redux flow, you need to use them from this.props e.g:
this.props.updateName()
The second parameter of the connect() function maps dispatch to your action creators, so your actions can be dispatched to the root reducer.