React + Redux: why the global state is not fed to the component - reactjs

Question

Consider the following code. It's supposed to work like this; keystrokes are supposed to update the local state and once the button is clicked, the global state should be updated. And the component itself is responsible to show the global state as well.
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: this.props.appState.name, localName: "" };
this.nameChanged = this.nameChanged.bind(this);
this.sendAction = this.sendAction.bind(this);
}
nameChanged(event) {
this.setState(Object.assign({}, this.state, { localName: event.target.value }));
}
sendAction(event) {
this.props.saveName(this.state.localName);
}
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
<input type="text" value={this.state.localName} onChange={this.nameChanged} />
<input type="button" value="Click me!" onClick={this.sendAction} />
</div>
);
}
}
const AppContainer = ReactRedux.connect(
state => ({ appState: state.appReducer.appState }),
dispatch => Redux.bindActionCreators({
saveName: (name) => ({ type: "SAVE_NAME", name })
}, dispatch)
)(App);
const appReducer = (state = { appState: { name: "World!" } }, action) => {
switch (action.type) {
case "SAVE_NAME":
return Object.assign({}, state, { name: action.name });
default:
return state;
}
};
const combinedReducers = Redux.combineReducers({
appReducer
});
const store = Redux.createStore(combinedReducers);
ReactDOM.render(
<ReactRedux.Provider store={store}>
<AppContainer />
</ReactRedux.Provider>,
document.getElementsByTagName('main')[0]
);
Right now, the local state is updated correctly. But when I click the button, even though the action is created and sent, but I don't see the global state with the new value in the UI. I'm not sure if the global state is not updated or the component is not properly informed.

Answer 1

Change <h1>Hello, {this.state.name}!</h1> to this:
<h1>Hello, {this.props.appState.name}!</h1>
You don't have to set the state locally, Redux is updating the props for you through connect when the store state changes. The other change you'll need to make is in your reducer. Your current state is pretty deeply nested and it's not being returned how you're expecting it to when you dispatch your action. Here's the updated version:
case "SAVE_NAME":
return {
...state,
appState: {
...state.appState,
name: action.name
}
}
Here's a working version in CodePen Link