尽管所有数据都正确传递，Redux状态仍未更新

Question

Tearing my hair out on this one, and I'm sure it'll be a stupid oversight but I've spent hours on it now!

I'm using the action creators and reducers below. Everything seems to work (I've run a console.log at every stage in the process and the data is being passed around correctly) but for some reason my store state is not updating.

The initial state is being set correctly when the page loads, so it's just when I pass data in through the action later on - nothing happens!

Can anyone spot the error? Thanks!

displayMessage.js (action)

export default function displayMessage(type, message){
    return {
        type: 'DISPLAY_MESSAGE',
        payload: {
            status: type,
            message: message
        }
    }
}

reducer_displayMessage.js

const initialState = {
    status: '',
    message: ''
}

export default (state = initialState, action) => {
    switch (action.type){
        case 'DISPLAY_MESSAGE':
            return action.payload;
    }
    return state;
}

rootReducer.js

import { combineReducers } from 'redux';
import SlideOverReducer from './reducer_slideOver';
import WorkshopSelectReducer from './reducer_workshopSelection';
import UserDetailsReducer from './reducer_userDetails';
import QualDetailsReducer from './reducer_qualDetails';
import DisplayMessageReducer from './reducer_displayMessage';

export default combineReducers({
    slideOver: SlideOverReducer,
    workshopSelection: WorkshopSelectReducer,
    userDetails: UserDetailsReducer,
    qualDetails: QualDetailsReducer,
    displayMessage: DisplayMessageReducer
});

EDIT: And here's one of the components that should use this action:

import React, {Component} from 'react';
import styles from '../../cssPartials/slideOverBar.css';
import tableStyles from '../../cssPartials/formElements.css';
import newUser from '../../../../data/actions/newUser';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import actions from '../../../../data/actions/actions';

class NewUser extends Component {

    constructor(props){
        super(props)

        this.state = {
            type: null,
            firstName: '',
            lastName: '',
            email: ''
        }
    }

    //...Other methods      

    submitForm(e){
        e.preventDefault();

        const firstName = this.state.firstName;
        const lastName = this.state.lastName;
        const email = this.state.email;
        const type = this.state.type;

        newUser(firstName, lastName, email, type, (data) => {
            const displayType = data.success ? 'success' : 'error'
            this.props.displayMessage(displayType, data.message) //Redux dispatch is called here
        });

    }

    render() {

        return (
            <div>
                <form className={styles.formElement}>
                    <div className={`btn-group btn-group-justified`}>
                        <div className={`btn-group`}>
                            <button className={this.state.type === 'admin' ? `btn btn-default active` : `btn btn-default`}
                                    onClick={(e) => this.chooseType(e, 'admin')}>Admin</button>
                        </div>
                        <div className={`btn-group`}>
                            <button className={this.state.type === 'tutor' ? `btn btn-default active` : `btn btn-default`}
                                    onClick={(e) => this.chooseType(e, 'tutor')}>Tutor</button>
                        </div>
                    </div>
                    {
                        this.state.type !== null 
                            ? <div className={styles.spacer}>
                                <input 
                                     type='text'
                                     className={tableStyles.input}
                                     value={this.state.firstName}
                                     placeholder='Enter first name'
                                     onChange={(e) => this.enterName(e, 'first')} />
                              </div>
                            : null

                    }
                    {
                            this.state.type !== null && this.state.firstName.length > 0
                                ? <div className={styles.spacer}>
                                    <input 
                                         type='text'
                                         className={tableStyles.input}
                                         value={this.state.lastName}
                                         placeholder='Enter last name'
                                         onChange={(e) => this.enterName(e, 'last')} />
                                  </div>
                                : null
                    }
                    {
                        this.state.type !== null && this.state.firstName.length > 0 && this.state.lastName.length > 0
                            ? <div className={styles.spacer}>
                                <input type='email'
                                     className={tableStyles.input}
                                     value={this.state.email}
                                     placeholder='Enter e-mail'
                                     onChange={(e) => this.enterEmail(e)} />
                              </div>
                            : null
                    }

                    {
                        this.state.type !== null && this.state.firstName.length > 0 && this.state.lastName.length > 0 && this.state.email.length > 7
                            ? <div className={styles.spacer}>
                                <div className={`btn-group btn-group-justified`}>
                                    <div className={`btn-group`}>
                                        <button type='submit' className={`btn btn-primary`} onClick={(e) => this.submitForm(e)} >Create User Account</button>
                                    </div>
                                </div>
                              </div>
                            : null


                    }

                </form>
            </div>
        )
    }

}

function mapDispatchToProps(dispatch){
    return bindActionCreators({ displayMessage: actions.displayMessage }, dispatch)
}


export default connect(null, mapDispatchToProps)(NewUser);

Answer 1

在displayMessage ，你需要做这个.dispatch（{type and value ...}）对你的reducer说：“嘿，伙计，这里有新东西给你！”

Answer 2

OK, so it looks like there isn't actually any problem at all!

For some reason, the store state shown in the React Developer tools was not updating straight away - when I triggered a separate event which called a different action, the state for this action updated as well.

I don't understand why it isn't showing immediately - other changes to the state do - but I've tested it with a dummy component that relies on changes to the store state and it seems to work fine.

So apologies to all - it seems as though this was a non-issue - but it boils down to a bit of strange behaviour in the developer tools rather than an actual problem!