Question

在这个上撕掉我的头发，我确信这将是一个愚蠢的疏忽，但我现在花了好几个小时！

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

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

有人能发现错误吗？谢谢！

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

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

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 ...}）对你的减速器说：＆＃34;嘿，伙计，这里有新东西给你！＆＃34;

Answer 2

好的，所以看起来根本没有任何问题！

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

我不明白为什么它没有立即显示 - 状态的其他更改 - 但我用虚拟组件测试它依赖于存储状态的更改，它似乎工作正常。

向所有人道歉 - 似乎这不是一个问题 - 但它归结为开发人员工具中的一些奇怪行为，而不是实际问题！

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

2 个答案: