Reduxアクションがレデューサーを呼び出さない

Question

この質問のタイトルはかなり要約されていますが、私はアクションを呼び出していますが、レデューサーを起動するようには見えません。でもまず！いくつかのコード...

のindex.html：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import configurestore from './store/configureStore'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

const store = configurestore(); 

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

App.js：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { deleteContact, addContact } from './actions/Contacts'; 
import ContactList from './components/ContactList'; 
import ContactAdder from './components/ContactAdder'; 

class App extends Component { 
    render() { 
    return (
     <div> 

     <h1>Contacts</h1> 

     <ContactList 
      contacts={this.props.contacts} 
      onDelete={this.props.deleteContact} 
     /> 

     <ContactAdder onAdd={this.props.addContact} /> 

     </div> 
    ); 
    } 
}; 

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

const mapDispatchToProps = (dispatch) => { 
    return { 
     deleteContact:() => deleteContact(), 
     addContact: (firstName, lastName) => addContact(firstName, lastName) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(App); 

店舗/ configureStore.js：

import { createStore, applyMiddleware } from 'redux'; 
import rootReducer from '../reducers'; 

export default function configureStore(initialState) { 
    return createStore(rootReducer, initialState); 
} 

リデューサー/ Contacts.js：

エクスポート機能の連絡先{ switch {action.type} { case 'ADD_CONTACT'： // TODO console.log（ 'これは呼び出されません'）; 戻り状態。 ケース 'DELETE_CONTACT'： // TODO 戻り状態。 デフォルト： 戻り状態。 }}

減速/ index.js：

import { combineReducers } from 'redux'; 
import { contacts } from './Contacts' ; 

export default combineReducers({ contacts }); 

アクション/ Contacts.js：

export function addContact(firstName, lastName) { 
    return { 
     type: 'ADD_CONTACT', 
     contact: { 
      fistName: firstName, 
      lastName: lastName 
     } 
    }; 
} 

export function deleteContact(id) { 
    return { 
     type: 'DELETE_CONTACT', 
     id: id 
    }; 
} 

コンポーネント/ ContactAdder.js：

import React, { Component } from 'react'; 
import Input from './Input'; 
import Button from './Button'; 

class ContactAdder extends Component { 

    state = { 
     firstName: '', 
     lastName: '' 
    }; 

    onFirstNameChange(val) { 
     this.setState({firstName: val.target.value}); 
    } 

    onLastNameChange(val) { 
     this.setState({lastName: val.target.value}); 
    } 

    onAdd() { 
     this.props.onAdd(this.state.firstName, this.state.lastName); 
     this.setState({ firstName: '' }); 
     this.setState({ lastName: '' }); 
    } 

    render() { 
     return (
      <div className='ContactAdder'> 
       <Input type='text' value={this.state.firstName} onChange={(evt) => this.onFirstNameChange(evt)} placeholder='First Name' /> 
       <Input type='text' value={this.state.lastName} onChange={(evt) => this.onLastNameChange(evt)} placeholder='Last Name' /> 
       <Button add onClick={this.onAdd.bind(this)}>Add</Button> 
      </div> 
     ); 
    } 

} 

export default ContactAdder; 

Answer 1

問題ですあなたがアクションを派遣していないということは、アクションクリエイターをしたがって、オブジェクトを返すだけですが、何もしません。そのオブジェクトをディスパッチする必要があります。

const mapDispatchToProps = (dispatch) => { 
    return { 
    deleteContact:() => dispatch(deleteContact()), 
    addContact: (firstName, lastName) => dispatch(addContact(firstName, lastName)) 
    }; 
} 

// Don't forget to connect and export 
export default connect(mapStateToProps, mapDispatchToProps)(App); 

dispatchを追加するだけで問題が解決されます。代わりに、私は個人的にディスパッチをバインドするために以下の賛美を好む。

export default connect(
    mapStateToProps, 
    { deleteContact, addContact} 
)(App); 

前のコードは、実行しようとしているコードとまったく同じです。