ディスパッチ動作が終了しモーダル

Question

Iを隠し、モーダルコンポーネントを表示減速を有します。アクション'HIDE_MODAL'派遣する私は私のモーダルコンポーネントに機能を送ることができますどのように

export const showAchievement = (modalProps) => ({ type: types.SHOW_ACHIEVEMENT, ...modalProps }) 

：

openAchievementModal(){ 
     this.props.showAchievement({ 
      type: 'SHOW_MODAL', 
      modalType: 'ADD_ACHIEVEMENT', 
      modalProps: { 
      dayId: this.props.day.id, 
      onChange: this.props.addAchievement 
     } 
    }) 
    } 

を私はのラッパーとしてreact-modalを使用していますモーダル示し

import {SHOW_MODAL, HIDE_MODAL } from '../constants/ActionTypes' 


import React from 'react'; 
import {connect} from 'react-redux'; 

import * as actions from '../actions'; 

const initialState = { 
    modalType: null, 
    modalProps: {} 
} 

export default function modal(state = initialState, action) { 
    switch (action.type) { 
    case 'SHOW_MODAL': 
     return { 
     modalType: action.modalType, 
     modalProps: action.modalProps 
     } 
    case 'HIDE_MODAL': 
     return initialState 
    default: 
     return state 
    } 
} 

アクションコンポーネントの上部に取り付けられている私のモーダル：

モーダルを閉じるには

import Modal from 'react-modal' 
import React, { Component } from 'react' 

const customStyles = { 
    content : { 
    top     : '50%', 
    left     : '50%', 
    right     : '50%', 
    bottom    : '30%', 
    marginRight   : '-50%', 
    transform    : 'translate(-50%, -50%)', 
    borderRadius   : '10px', 
    border    : '3px solid #ccc' 
    }, 
}; 

class ModalWrapper extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     modalIsOpen: true 
    }; 

    this.closeModal = this.closeModal.bind(this); 
    } 

    closeModal() { 
    this.setState({modalIsOpen: false}); 
    } 


    render() { 
    return (
      <Modal style={customStyles} isOpen={this.state.modalIsOpen} contentLabel="Model Wrapper" closeModal={this.props.closeModal}> 
       <header> 
       <button onClick={this.closeModal}>Close</button> 
       </header> 

       {this.props.children} 

      </Modal> 
     ); 
    } 
} 

export default ModalWrapper 

、私はfalseにmodelIsOpenする必要がありますか、アクションHIDE_MODALを派遣としてaswell：

は、モーダルラッパーに反応しますか？

Answer 1

actionsプレーンオブジェクトであるべきです。あなたはそれらを機能と混合しています。

代わりに、modalコンポーネントにアクションをディスパッチする関数callbackを渡すだけです。

あなたはスマートコンポーネントでこれを行うだろう。 smart-and-dumb-componentsの記事を参照してください。

onOpenAchievementModal() { 
    this.props.showAchievement({ 
    ... 
    }) 
} 

onAddAchievementModal(achievement) { 
    this.props.addAchievement({ 
    ... 
    achievement, 
    }) 
} 

して、モーダルをレンダリングする、のようなもの：

<Modal onOpen={this.onOpenAchievementModal} onClickAchievement={this.onAddAchievementModal}/>