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：

export function contacts(state = [], action) {
    switch(action.type) {
        case 'ADD_CONTACT':
            // TODO
            console.log('this is not getting called');
            return state;
        case 'DELETE_CONTACT':
            // TODO
            return state;
        default:
            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;

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即可解决问题。另外，我个人更喜欢以下sintaxis来绑定调度。

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

之前的代码与您尝试的完全相同。

Redux动作没有调用reducers

1 个答案: