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

扯掉我的头发，我敢肯定这是一个愚蠢的疏忽，但我现在已经花了几个小时了！

我在下面使用动作创建者和还原器。一切似乎都正常（我在流程的每个阶段都运行了console.log，并且数据正确传递了），但是由于某种原因，我的商店状态没有更新。

初始状态是在页面加载时正确设置的，所以这只是稍后我通过操作传递数据时-没有任何反应！

谁能发现错误？谢谢！

displayMessage.js（操作）

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

编辑：这是应该使用此操作的组件之一：

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

最佳答案

在displayMessage中，您需要执行此操作。dispatch（{type and value ...}）要对减速器说：“嘿，这是给您的新东西！”