Can not show message from the reducer in react - reactjs

Question

I am trying to show message 'hello brozz..' from the reducer to a component render() method.ComponentDidMount() get the this.props.message as please see the image. And my reducer is like
export const geod = (state ={}, action) => {
console.log('inside reducer');
switch(action.type){
case 'INITIAL_MESSAGE':
return [
...state, {
message:'hello brozz..'
}
]
case 'CLICK_MESSAGE':
return [
...state, {
message: ''
}
]
default:
return state;
}
};
But I can not use this.props.message as <div><div>{this.props.message}</div></div> inside the render method. I am getting the error
Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons
My component is,
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { initialMessageAction, clickButtonAction } from './redux.js';
import { connect } from 'react-redux';
import { Message } from './messageComponent';
class App extends Component {
componentWillMount() {
console.log('component will mount');
let data = this.props.initialMessageAction();
}
componentDidUpdate() {
console.log('comp Did Update')
console.log(this.props.message)
}
render() {
return (
<div className="App">
<div className="App-header">
</div>
<p className="App-intro">
react-redux-data-flow
</p>
<div>{this.props.message}</div>
<div>{this.props? <div>hi ..<button onClick={ () => this.props.clickButtonAction() }>hide message</button></div>: ''}</div>
</div>
);
}
}
const mapStateToProps = (state, ownProperty) => ({
message:state.geod,
});
const mapDispatchToProps = {
initialMessageAction,
clickButtonAction
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);

Answer 1

const initialState = {message: null};
export const geod = (state = initialState, action) => {
console.log('inside reducer');
switch(action.type){
case 'INITIAL_MESSAGE':
return Object.assign({}, state, {message:'hello brozz..'});
case 'CLICK_MESSAGE':
return Object.assign({}, state, {message: ''});
default:
return state;
}
};
And in stateMap { message: state.geod.message }.
As initial state You use an empty object and you see it in error.