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

在这件事上我大发雷霆，我肯定这是一个愚蠢的疏忽，但我现在已经花了好几个小时在这件事上了

我正在使用下面的动作创建者和还原者。一切似乎都正常（我在流程的每个阶段都运行了

控制台.log

，数据传递正确），但由于某些原因，我的存储状态没有更新

当页面加载时，初始状态被正确设置，所以只是当我稍后通过操作传递数据时，什么也没有发生

有人能发现错误吗？谢谢

displayMessage.js（操作）

reducer\u 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);

import React，{Component}来自'React'；
从“../../cssPartials/slideowerbar.css”导入样式；
从“../../cssPartials/formElements.css”导入表样式；
从“../../../../data/actions/newUser”导入新用户；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../../../data/actions/actions”导入操作；
类NewUser扩展组件{
建造师（道具）{
超级（道具）
此.state={
类型：null，
名字：''，
姓氏：“”，
电子邮件：“”
}
}
//…其他方法
提交表格（e）{
e、 预防默认值（）；
const firstName=this.state.firstName；
const lastName=this.state.lastName；
const email=this.state.email；
const type=this.state.type；
新用户（名字、姓氏、电子邮件、类型，（数据）=>{
const displayType=data.success？'success'：'error'
this.props.displayMessage（displayType，data.message）//这里调用Redux分派
});
}
render（）{
返回(
this.chooseType（e，'admin'）}>admin
this.chooseType（e，'tutor'）}>tutor
{
this.state.type！==null
? 
this.enterName（e，'first'）}/>
：null
}
{
this.state.type！==null&&this.state.firstName.length>0
? 
this.enterName（e，'last'）}/>
：null
}
{
this.state.type！==null&&this.state.firstName.length>0&&this.state.lastName.length>0
? 
这个。输入email（e）}/>
：null
}
{
this.state.type！==null&&this.state.firstName.length>0&&this.state.lastName.length>0&&this.state.email.length>7
? 
this.submitForm（e）}>创建用户帐户
：null
}
)
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{displayMessage:actions.displayMessage}，dispatch）
}
导出默认连接（空，mapDispatchToProps）（新用户）；

在

displayMessage

中，你需要这样做。分派（{type and value…}）对你的减速机说：“嘿，伙计，这是你的新东西！”

在

displayMessage

中，你需要这样做。分派（{type and value…}）对你的减速机说：“嘿，伙计，这是你的新东西！”

好的，所以看起来根本没有什么问题

出于某种原因，React Developer工具中显示的存储状态没有立即更新-当我触发一个单独的事件调用另一个操作时，该操作的状态也会更新

我不明白为什么它没有立即显示出来——状态的其他更改也会显示出来——但我已经用一个依赖于存储状态更改的虚拟组件对它进行了测试，它似乎工作得很好

---

因此，向所有人道歉——这似乎不是问题——但归根结底，这是开发人员工具中的一点奇怪行为，而不是一个实际问题

好的，看起来根本没有问题

出于某种原因，React Developer工具中显示的存储状态没有立即更新-当我触发一个单独的事件调用另一个操作时，该操作的状态也会更新

我不明白为什么它没有立即显示出来——状态的其他更改也会显示出来——但我已经用一个依赖于存储状态更改的虚拟组件对它进行了测试，它似乎工作得很好

---

因此，向所有人道歉——这似乎不是问题——但归根结底，这是开发人员工具中的一点奇怪行为，而不是一个实际问题

如果不知道如何将状态映射到道具，很难说。你在Redux开发工具中看到了什么？你能发布使用该工具的组件吗？你确定你正在使用

this.dispatch（）

调度操作，而不仅仅是调用操作创建者

displayMessage（）

？我正在使用react-Redux库将调度映射到道具-顺便编辑以显示

新用户（）

调用

this.props.displayMessage（）

的方法是将新用户信息写入数据库的ajax调用。

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