Redux-Aktionen rufen keine Reduzierungen auf

Question

Der Titel dieser Frage fasst es ziemlich zusammen, ich rufe die Aktionen auf, aber es scheint nicht die Reduzierungen auszulösen. Aber zuerst! Einige Code ...

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

store/configureStore.js:

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

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

Minderer/Contacts.js:

Exportfunktionskontakte (s tate = [], Aktion) { switch (action.type) { Fall 'ADD_CONTACT': // TODO console.log ('wird nicht aufgerufen'); Rückkehrzustand; Fall 'DELETE_CONTACT': // TODO Rückkehrzustand; default: Rückkehrzustand; } }

Reduzierungen/index.js:

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

export default combineReducers({ contacts }); 

Aktionen/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 
    }; 
} 

Komponenten/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

Das Problem ist, dass Sie die Aktionen nicht versenden, nennen Sie die Aktionsersteller nur als ny andere reguläre Funktion, daher gibt es nur das Objekt zurück, aber es tut nichts damit, Sie müssen dieses Objekt versenden.

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

Nur durch die dispatch Hinzufügen Ihr Problem zu beheben. Alternative, ich persönlich bevorzuge die folgenden sintaxis, um die Versendungen zu binden.

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

Der vorherige Code tut genau das, was Sie versuchen zu tun.