Question

我在提交后通过调度操作将新对象添加到对象数组时遇到问题。这样做的目的是显示跨站点的Flash消息。我有两个负责显示消息的组件，FlashMessagesList和FlashMessage。服务器也响应消息对象，需要将其添加到消息数组中。问题是当调度动作时，我可以看到它是在redux devtools中发送的，但是状态永远不会改变我的工作，它仍然是空阵列，我很坚持这个，所以任何建议都将是欢迎。以下是相关代码：

/ * flashMessagesList组件* /

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import FlashMessage from './FlashMessage';
import { deleteFlashMessage } from '../../actions/actionFlashMessage';

class FlashMessagesList extends Component { //this is conected component cause we need data from store
  render() {
    const messages = this.props.messages.map(message =>
    <FlashMessage key={message.id} message={message} deleteFlashMessage={this.props.deleteFlashMessage}/>
  );
  return (
    <div>{messages}</div>
    );
  }
}
function mapStateToProps(state) {
  return { //here we take a slice of global state
    messages: state.flash.messages //define this in root reducer
  };
}
function mapDispatchToProps(dispatch) {
  return {
    deleteFlashMessage: () => dispatch(deleteFlashMessage())
  };
}
FlashMessagesList.propTypes = { //what this component will take
  messages: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      style: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired
    })
  ),
  deleteFlashMessage: PropTypes.func.isRequired
};
export default connect(mapStateToProps, mapDispatchToProps)(FlashMessagesList); //pass message from store to this component

/ * flashMessage组件* /

import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';

class FlashMessage extends Component {

  deleteFlashMessage = () =>{
    this.props.deleteFlashMessage(this.props.message.id); //dispatch some action that it has on it props
  }
  render() {
    const { id, style, text } = this.props.message; //we can deconstruct message cause it is object
    return (
    <div className={classnames('alert', {
      'alert-success': style === 'success',
      'alert-danger': style === 'danger'
    })}
    >
    { text }
    <button className="close" onClick={this.deleteFlashMessage}><span>&times;</span></button>
    </div>
    );
  }
}
FlashMessage.propTypes = {
  message: PropTypes.object.isRequired,
  deleteFlashMessage: PropTypes.func.isRequired
};
export default FlashMessage;

/ * reducerFlashMessage * /

import * as types from '../actions/actionTypes';
import deepFreeze from 'deep-freeze';
import expect from 'expect';

const INITIAL_STATE = {
    messages: []
};
const reducerFlashMessage = (state = INITIAL_STATE, action) => {
    switch (action.types) {
        case types.ADD_FLASH_MESSAGE:
            return { ...state,
                messages: [ ...state.messages, {
                    id: action.message.id,
                    style: action.message.style,
                    text: action.message.text
                }]
            };
    }
    return state;
};

export default reducerFlashMessage;

/ * actionflashMessage * /

import * as types from './actionTypes';

export function addFlashMessage(message) {
      return {
        type: types.ADD_FLASH_MESSAGE,
        message

      };
    }

/ * registerUser-place我发送addFlashMessage * /

export function registerUser({
  timezone,
  name,
  email,
  password,
  passwordConfirmation
}) {
  return dispatch => {
    dispatch(isLoading(true));
    axios.post('/auth/signup', {
      timezone,
      name,
      email,
      password,
      passwordConfirmation
    })
    .then(response => {
      dispatch(_registerUserSuccess(response.data.errors, response.data.message));
      dispatch(isLoading(false));
      dispatch(addFlashMessage(response.data.message));
      dispatch(formReset());
      // browserHistory.push('/signin');
      setTimeout(() => {
              // dispatch(_hideNotifications());
      }, 2000);
      // document.getElementById('form').reset();
    })
    .catch(error => {
      if (error.response) {
        dispatch(registerUserFailure(error.response.data.errors, error.response.data.message));
        dispatch(isLoading(false));
        dispatch(addFlashMessage(error.response.data.message));
      }
      else {
        // Something happened in setting up the request that triggered an Error
        console.log(error.message);
      }
    });
  };
}

来自服务器的

/ * validation.js，我创建了消息对象* /

export function validateSignupForm(payload) {
    const errors = {};
    const message = {};
    if(validator.isEmpty(payload.name)) {
      errors.name = 'Name is required';
    }
    if(validator.isEmpty(payload.email)) {
      errors.email = 'Email is required';
    }
    if(validator.isEmpty(payload.password)) {
      errors.password = 'Password is required';
    }
    if(validator.isEmpty(payload.passwordConfirmation)) {
      errors.passwordConfirmation = 'Password confirmation is required';
    }
    if(validator.isEmpty(payload.timezone)) {
      errors.timezone = 'Timezone is required';
    }
    if (payload.email &&  !validator.isEmail(payload.email)) {
        errors.email = 'Please provide a correct email address.';
    }
    if (payload.password && payload.password.length < 4) {
        errors.password = 'Password must have at least 4 characters.';
    }
    if (payload.passwordConfirmation && !validator.equals(payload.password, payload.passwordConfirmation)) {
        errors.password = 'Passwords must match.';
    }
    if (!isEmpty(errors)) {
      message.id = shortid.generate(),
      message.style = 'danger';
      message.text = 'Check the form for errors.';
    }

    return {
        success: isEmpty(errors),
        message,
        errors
    };
}

Answer 1

你的减速机有一个错字。而不是

switch (action.types) {

应该阅读

switch (action.type) {

Redux reducer将新对象添加到数组中

1 个答案: