Normalized data from Redux not displaying in front end (using react) - reactjs

Question

I have normalized by data in redux, but now grabbing and display it on the front end is causing issues.
Ive been trying to fix this for a few days, i've tried what i feel is the most obvious this.props.... but i'm clearly missing something. Was using Manning newest book on Redux, Redux in Action, which has been a great guide for me so far.
I was trying to break up the data, so the tree would have business (dashboard) and business_locations (another page).
in my Redux DevTools console, the Action Tree looks like:
type: 'RECEIVE_ENTITIES'
payload
entities
business_locations
- 652 {id: 652, business_id: 452...}
business
- 452 {id: 452}
result: 452
my businessReducer:
import {
RECEIVE_ENTITIES,
FETCH_BUSINESS_STARTED,
FETCH_BUSINESS_SUCCESS,
SET_CURRENT_BUSINESS_ID,
} from '../../actions/types';
const initialBusinessState = {
items: [],
isLoading: false,
error: null,
};
export const getBusinesses = state => {
return Object.keys(state.business.items).map(id => {
return state.business.items[id];
});
};
export default function businesses(state = initialBusinessState, action) {
switch (action.type) {
case RECEIVE_ENTITIES: {
const { entities } = action.payload;
if (entities && entities.businesses) {
return {
...state,
isLoading: false,
items: entities.businesses,
};
}
return state;
}
case FETCH_BUSINESS_STARTED: {
return {
...state,
isLoading: true,
};
}
case FETCH_BUSINESS_SUCCESS: {
return {
...state,
isLoading: true,
items: action.payload.businesses,
};
}
default: {
return state;
}
}
}
export function setCurrentBusinessId(id) {
return {
type: SET_CURRENT_BUSINESS_ID,
payload: {
id,
},
};
}
my businessActions;
import { normalize } from 'normalizr';
import {
FETCH_BUSINESS_STARTED,
FETCH_BUSINESS_ERROR,
RECEIVE_ENTITIES,
SET_CURRENT_BUSINESS_ID,
} from './../types';
import * as schema from '../schema';
import * as api from '../../api';
function fetchBusinessStarted() {
return {
type: FETCH_BUSINESS_STARTED,
};
}
function fetchBusinessFailed(err) {
return {
type: FETCH_BUSINESS_ERROR,
payload: {
err,
},
};
}
function receiveEntities(entities) {
return {
type: RECEIVE_ENTITIES,
payload: entities,
};
}
export function setCurrentBusinessId(id) {
return {
type: SET_CURRENT_BUSINESS_ID,
payload: {
id,
},
};
}
export function fetchBusinesses() {
return (dispatch, getState) => {
dispatch(fetchBusinessStarted());
return api
.fetchBusinesses()
.then(resp => {
const businesses = resp.data;
const normalizedData = normalize(businesses, schema.businessSchema);
console.log('normalizedData', normalizedData);
dispatch(receiveEntities(normalizedData));
if (!getState().page.currentBusinessId) {
const defaultBusinessId = sessionStorage.getItem('business_id');
dispatch(setCurrentBusinessId(defaultBusinessId));
}
})
.catch(err => {
console.log(err);
fetchBusinessFailed(err);
});
};
}
my pageReducer
import { SET_CURRENT_BUSINESS_ID } from '../../actions/types';
const InitialPageState = {
currentBusinessId: null,
};
export default function page(state = InitialPageState, action) {
switch (action.type) {
case SET_CURRENT_BUSINESS_ID: {
return {
...state,
currentBusinessId: action.payload.id,
};
}
default: {
return state;
}
}
}
my schema
import { schema } from 'normalizr';
const businessLocationSchema = new schema.Entity('business_locations');
const businessSchema = new schema.Entity('business', {
business_locations: [businessLocationSchema],
});
export { businessSchema };
rootReducer
const rootReducer = (state = {}, action) => {
return {
page: pageReducer(state.page, action),
business: businessReducer(state.businesses, action),
businessLocation: businessLocationsReducer(state.businessLocations,
action),
form: formReducer,
};
};
front end:
class Dashboard extends React.Component {
componentDidMount() {
this.props.dispatch(fetchBusinesses());
}
render() {
if (this.props.isLoading) {
return (
<SpinContainer>
<Spin size="large" />
</SpinContainer>
);
}
console.log(this.props);
return (
<Wrapper>
<Card bordered={false}>
<Maps
zoom={16}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `30vh` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
<p>{this.props.business.website}</p>
<p>{this.props.business.businessName}</p>
</Card>
<Link to="/locations">
<Card bordered={false}>
<h1>****</h1>
</Card>
</Link>
<Link to="stamp-cards">
<Card bordered={false}>
<h1>*****</h1>
</Card>
</Link>
<Card bordered={false}>
<h1>*****</h1>
</Card>
</Wrapper>
);
}
}
function mapStateToProps(state) {
const { isLoading, business } = state.business;
return {
business: getBusinesses(state),
isLoading,
};
}
export default connect(mapStateToProps)(Dashboard);