2017-02-22 5 views
0

提出後にアクションをディスパッチすることでオブジェクトの配列に新しいオブジェクトを追加する際に問題があります。これは、サイト全体にフラッシュメッセージを表示することを目的としています。私はメッセージ、FlashMessagesListとFlashMessageを表示する責任がある2つのコンポーネントを持っています。また、サーバーはメッセージオブジェクトに応答し、メッセージ配列に追加する必要があります。問題はアクションがディスパッチされたときに、それがredux devtoolsにディスパッチされていることがわかりますが、状態は何も変更されず、空の配列に残ります。Redux reducerアレイに新しいオブジェクトを追加

/* 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; 

/*:ここに関連するコードでありますactionflashメッセージ*/

import * as types from './actionTypes'; 

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

     }; 
    } 

/*私はaddFlashMessageを派遣するのregisterUser-場所*/

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

/* iのメッセージオブジェクトを作成し、サーバーから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 
    }; 
} 
+0

質問をして、[含まれるショート、自己、正しい例](http://sscce.org/)にダウンあなたのコードを、沸騰してみてくださいお読みください。この練習をするだけで問題を識別できることはよくありますが、まだ問題がある場合は、SSCCEのヘルプを入手する方が簡単になります。 –

答えて

0

あなたの減速にタイプミスがあります。代わりに

switch (action.types) { 

switch (action.type) { 
+0

助けてくれてありがとう、私はこれを信じることはできません。 –

関連する問題