React + Redux：グローバル状態がコンポーネントに供給されない理由

Question

次のコードを考慮してください。このように動作するはずです。キーストロークはローカル状態を更新するはずで、ボタンがクリックされると、グローバル状態を更新する必要があります。コンポーネント自体もグローバルな状態を示す責任があります。

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] 
); 

現時点では、ローカル状態が正しく更新されています。しかし、ボタンをクリックすると、アクションが作成されて送信されますが、UIの新しい値でグローバル状態が表示されません。グローバル状態が更新されていないか、コンポーネントが正しく通知されていないかどうかはわかりません。これに

Answer 1

変更<h1>Hello, {this.state.name}!</h1>は：

<h1>Hello, {this.props.appState.name}!</h1> 

あなたが通じたときに店の状態の変化を接続するために、Reduxのは小道具を更新しているローカル状態を設定する必要はありません。あなたが作る必要があるもう一つの変更はあなたの減速器にあります。あなたの現在の状態は、かなり深くネストされており、あなたがあなたのアクションをディスパッチするときにどのように期待しているか返されていません。ここで更新されたバージョンです：this.props.appStateの値は、あなたがボタンをクリックするといただきました！

case "SAVE_NAME": return { ...state, appState: { ...state.appState, name: action.name } }

はここCodePen Link