[RESOLVED] React-Redux - state not being maintained following dispatch

[techgnome]

UPDATE: To make it easier for others to diagnose, I've added the project to GitHub - https://github.com/TechGnome/react-redux-refreshissue
There's been a couple changes to the code compared to below. The state object in the Reducer has been changed from an array to an object (still didn't help though).
-tg


Learning React-Redux for work. I've gone through several tutorials and now trying to take it to the next level. Naturally it's not that easy and I've missed something along the way.
First the code:
actions/MyNameActions.js

export const changeName = myNewName => ({
    type: 'CHANGE_NAME',
    myNewName
  })

reducers/MyNameReducer.js

const MyName = (state = [], action) => {

    console.log("REDUCER - action.myNewName: " + action.myNewName)
    console.log("REDUCER - state.myNewName: " + state.myNewName)
    
      switch (action.type) {
        case 'CHANGE_NAME':
          return [
            ...state,
            {
              myNewName: action.myNewName
            }
          ]
        default:
          return state
      }
    }
    
    export default MyName

components/MyNameComponent.js

import React from 'react'
import { connect } from 'react-redux'
import { changeName } from '../actions/MyNameActions'

class MyName extends React.Component {
    render() {
        let input

        console.log("0) component - render() - this.props")
        console.log(this.props)

        return(
          <div>
          <form
            onSubmit={e => {
              e.preventDefault()
              if (!input.value.trim()) {
                return
              }
              console.log("2) component - render() - this.props")
              console.log(this.props)

              this.props.changeName(input.value)

              console.log("3) component - render() - this.props")
              console.log(this.props)
 
              input.value = ''
            }}
          >
            <input ref={node => input = node} />
            <button type="submit">
              Change Name
            </button>
          </form>
          Hi there, {this.state ? this.state.myNewName: this.props.myNewName}.
        </div>
          )
    }
}

const mapDispatchToProps = (dispatch) => {
return {changeName: myNewName => dispatch(changeName(myNewName))}
}

const mapStateToProps = (state) => {
  return {myNewName : state.myNewName}
}

export default connect(mapStateToProps, mapDispatchToProps)(MyName)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux'
import { createStore } from 'redux'

import MyName from './reducers/MyNameReducer'

const store = createStore(MyName, {myNewName:"enter your name"})

ReactDOM.render(<Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

The end result is supposed to be a page that has a text box, a button and text asking me to enter my name. Upon entering text and clicking the button, the text should change from "Hi there, please enter your name." to "Hi there, techgnome." (assuming I entere techgnome in the text box).

Only it doesn't. Instead it changes to "Hi there, ."

As you can see from the component code, I spit out this.props along the way, and I can see it just fine. It goes to the dispatch, where the reducer runs. and, I see the correct payload in the reducer... but when it comes back out from the dispatch call, it's reverted to the previous state (instead of the new state) AND when it then re-renders the component, somehow this.props becomes undefined!
What the what?

been staring at this for a couple hours now &* searching the interwebnettubes and I've come up with nothing. I'm positive I've missed something simple and basic, so much so that I don't see the forest for the trees.

This was supposed to be a simple deal too. Bleh.

-tg