1
这个问题的标题几乎总结了它,我打电话的行动,但它似乎并没有触发减速机。但首先!一些代码...Redux行动不叫减速机
的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:
导出功能联系人(s tate = [],action)switch(action.type){ case'ADD_CONTACT': // TODO console.log('This is not getting called'); 返回状态; case'DELETE_CONTACT': // TODO return state; 默认值: 返回状态; } }
减速器/ 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;