Redux - レデューサーが呼び出されない

Question

私はReduxを学ぼうとしています。私はオンラインのチュートリアルに従い、その例を使用してうまくいきました。それから私は別の小さなテストアプリを作って、それは正常に働いた。今私は別の小さなテストアプリを試していると私はこのエラーに立ち往生し、理由が分からない。

アプリケーションは単なる入力ボックスとボタンです。ボタンをクリックすると、ボックス内の内容が下に表示されるリストに追加されます。

ただし、レデューサーは状態を更新していません。私はこれを引き起こす一般的な問題を見てきましたが、私の減速機は状態を変えず、私はディスパッチなどに拘束しました。たぶん私はどこか（またはそのような小さなと愚かな）どこかで誤植をしただけで、私はそれを働かせることはできません。

私はそれを変更しようとしました。下のボックスに入力した文字列が表示され、それでも動作しません。誰でもなぜ減速機が作動していないのか知っていますか？

index.js（メイン）

import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Provider} from 'react-redux'; 
import {createStore, applyMiddleware} from 'redux'; 
import thunk from 'redux-thunk'; 
import promise from 'redux-promise'; 
import createLogger from 'redux-logger'; 
import allReducers from './reducers'; 
import App from './components/App'; 

const logger = createLogger(); 
const store = createStore(
    allReducers, 
    applyMiddleware(thunk, promise, logger) 
); 

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

App.js

import React from 'react'; 
import NameList from '../containers/name-list.js' 
import Input from '../containers/input.js' 

const App =() => (
    <div> 
    <Input /> 
    <hr /> 
    <NameList /> 
    </div> 
); 

export default App; 

index.js（アクション）

export const addName = (name) => { 
    return { 
     type: 'NAME_ADDED', 
     payload: name 
    } 
}; 

減速・アドインname.js

export default function (state = null, action) { 
    switch (action.type) { 
     case 'NAME_ADDED': 
      return action.payload; 
      break; 
    } 
    return state; 
} 

index.js（減速合成）

import {combineReducers} from 'redux'; 
import AddNameReducer from './reducer-add-name'; 


const allReducers = combineReducers({ 
    nameList: AddNameReducer 
}); 

export default allReducers 

input.js

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import {addName} from '../actions/index' 

class Input extends Component { 
    render() { 
    return(
     <div> 
     <input id='name-input' /> 
     <button id='add-name-button' onClick={() => addName(document.getElementById('name-input').value)}>Add name</button> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    nameList: state.nameList 
    }; 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({addName: addName}, dispatch); 
} 

export default connect(mapStateToProps, matchDispatchToProps)(Input); 

名list.js

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 

class NameList extends Component { 

    getNameList() { 
    //This is where I'll loop through this.props.nameList and build the list of elements 
    return this.props.nameList; 
    } 

    render() { 
    return(
     <div>Current list : {this.getNameList()}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    nameList: state.nameList 
    }; 
} 

export default connect(mapStateToProps)(NameList); 

ありがとうございました！

Answer 1

私はあなたのアクションが派遣されていないと思います。 buttonタグであなたのinput.js で

、変更

onClick={() => addName(document.getElementById('name-input').value)} 

onClick={() => this.props.addName(document.getElementById('name-input').value)} 

の事はアクションがmapDispatchToPropsと 'bindActionCreators（アクション、派遣）' を介して渡されるべきであるだろうアクションを 'ディスパッチ'で囲み、小道具 'addName'を介してコンポーネントを通過させます。（単にオブジェクトを返す）弾丸のようなものであるだけではアクション

（あなたmapDispatchToPropsで定義されている）あなたは

import {addName} from '../actions/index' <--- a bullet 

が宣言されたあなたのケースでは、それを発射するもの（派遣）

が必要になりますあなたのonClickは、ディスパッチせずに、単なるオブジェクトを返し、リデューサーにディスパッチしません。

addName() // <--- Just a bullet 

しかし

this.props.addName() // <--- bullet with a gun 

それは（派遣を持っている... mapDispatchToProps/bindActionCreatorsからである）それは我々が使用するものです、周りに包まれました。

Answer 2

あなただけのペイロードを返す代わりに減速 - アドオンname.jsに新しいアクションペイロードを持つ既存の状態を組み合わせる必要があり、すなわち

return Object.assign({}, state, { 
    todos: [ 
     ...state, 
     { 
     action.payload 
     } 
    ] 
    })