2017-08-24 119 views
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; 

回答

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即可解决您的问题。另外,我个人更喜欢以下sintaxis绑定发送。

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

上面的代码与您正在尝试执行的操作完全相同。