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

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

Code:

---

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

---

reducers/MyNameReducer.js

Code:

---

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

Code:

---

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

Code:

---

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

I am just about to pick up looking at React & ReactNative for work and so have been looking for tutorials (which i have been bookmarking for later) so i can check them out to see if we want to use either for future projects.

One of the tutorials i bookmarked was this one which is about React & Redux, i cant pretend to understand it yet but i liked the tutorial style and it seems quite detailed so its possible it might help - https://www.valentinog.com/blog/reac...ial-beginners/

i'll hae to check it out.
In this case, my problem was my return line. I was returning an array, when it should have been an object. A stupid, yet subtle mistake.


-tg