Redux行動不叫減速機

這個問題的標題幾乎總結了它，我打電話的行動，但它似乎並沒有觸發減速機。但首先！一些代碼...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;

來源

2017-08-24 Tiwaz89

的問題是你沒有調度行動，你只是把行動創造者稱爲一個行動創造者因爲它只是返回對象，但它不會對它做任何事情，所以您需要調度該對象。

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

上面的代碼與您正在嘗試執行的操作完全相同。

來源

2017-08-24 15:29:49 Crysfel

Redux行動不叫減速機

回答

相關問題