Redux 动作不调用减速器

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

store/configureStore.js:

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

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

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

reducers/index.js:

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

export default combineReducers({ contacts });

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

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

问题是你没有分派动作，你只是像调用任何其他常规函数一样调用动作创建者，因此它只是 returns 对象，但它没有对它做任何事情，你需要调度那个对象。

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 动作不调用减速器

Redux actions not calling reducers

flux

ecmascript-6

reactjs

redux

react-redux