反応モーダルポップアップ変更後のReactjsリフレッシュ親データ

Question

反応モーダルを使用して、自分のコンポーネントの1つでポップアップを設定しています。私は、反応モーダルで包まれたdivをレンダリングするコンポーネントを持っています。私の親コンポーネントは、isOpenをfalseに設定してモーダルコンポーネントをロードしてレンダリングします。親のリンクをクリックすると、isOpenがtrueに設定され、モーダルポップアップが開きます。

開いているポップアップ内で自分のデータを変更してから、変更を保存し、閉じるボタンをクリックするとモデルを閉じます。

私は、データの変更と状態の変化を処理するアクションとレデューサーを備えたreduxを使用しています。

概念的には、ポップアップからの変更を表示するために親をどのように更新しますか？操作を使用してデータを変更して、ストアを再生成してコンポーネントのデータを更新しないでください。保存後に明示的に「更新」する必要がありますか？私の問題は、ポップアップが閉じたときに、DataViewコンポーネントの「リフレッシュ」が何も起きていないことです。以下

コンポーネント：

のDataViewコンポーネント

import React from 'react'; 
import DataView from './MonthView.js'; 
import DataViewPopup from './MonthViewPopup.js'; 
import { connect } from 'react-redux'; 
import { getAction } from '../actions/actions.js'; 
import { getActionAll } from '../actions/actions.js'; 
import { getPopupData } from '../actions/actions.js'; 

class DataViewContainer extends React.Component { 
    constructor() { 
    super(); 

    this.popupCategory = undefined; 
    this.popupMonth = undefined; 

    this.state = { 
     detailPopup : false, 
     refreshView: false 
    } 

    this.handleAddYear = this.handleAddYear.bind(this); 
    this.handleSubtractYear = this.handleSubtractYear.bind(this); 
    this.handleGetDetail = this.handleGetDetail.bind(this); 

    } 

    componentDidMount() { 
    this.props.getAction(2016); 
    this.props.getActionAll(2016); 
    } 

    render() { 

    return (
     <div className="row"> 
      <div className="col-sm-8"> 
       <MonthView transactions={this.props.storeData.storeData} selectedYear={this.props.storeData.selectedYear} onAddYear={this.handleAddYear} onSubtractYear={this.handleSubtractYear} onHandleGetDetail={this.handleGetDetail} /> 
      </div> 
      <div className="col-sm-4"> 
       <MonthViewPopup modalActive={this.state.detailPopup} transactions={this.props.storePopupData.getPopupData} selectedYear={this.props.storeTransactions.selectedYear} category={this.popupCategory} month={this.popupMonth}/> 
      </div> 
     </div> 
    ) 

    } 

    handleGetDetail(category,month) { 

    console.log("props inside handleGetDetail: ", this.props); 

    this.popupCategory = category; 
    this.popupMonth = month; 
    let popupYear = this.props.storeTransactions.selectedYear 

    this.props.getPopupData(popupYear, month, category); 

    this.setState({ detailPopup: true}, function() {}); 

    } 

} 


const mapStateToProps = (state) => ({ 
    storeData: state.storeData, 
    storePopupData: state.storePopupData, 
    storeDataAll: state.storeDataAll 
}); 

export default connect(mapStateToProps, {getAction,getActionAll,getPopupData})(DataViewContainer); 

DataViewPopupコンポーネント

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

import { saveAction } from '../actions/actions.js'; 
import { getActionAll } from '../actions/actions.js'; 

class DataViewPopup extends React.Component { 

    constructor (props) { 
    super(props) 

    this.editedData = new Map(); 

    this.state = { 
     modalIsOpen: false 
    }; 

    this.openModal = this.openModal.bind(this); 
    this.afterOpenModal = this.afterOpenModal.bind(this); 
    this.closeModal = this.closeModal.bind(this); 

    this.renderFilteredTransactions = this.renderFilteredTransactions.bind(this); 

    } 

openModal() { 
    this.setState({modalIsOpen: true}); 
    } 

    afterOpenModal() { 
    console.log("inside afterOpenModal"); 
    } 

    closeModal() { 

    this.props.saveTransactions(this.editedData); 

    this.editedData = new Map(); 

    this.setState({ modalIsOpen: false }, function() {}); 

    } 
    componentWillUnmount() { 

    this.props.getDataAll(); // i tried this but it does not work because the component (modal popup) is still mounted, but just not visible 

    //this.props.refreshParent(); 

    } 


    componentWillReceiveProps(nextProps){ 

    if (nextProps.modalActive === true) { 
     this.openModal(); 
     return; 
     } 

    } 

    render() { 
     return <div> 
      <Modal 
      isOpen={this.state.modalIsOpen} 
      //isOpen={this.modalActive}//not needed as is currently setup 
      onAfterOpen={this.afterOpenModal} 
      onRequestClose={this.closeModal} 
      //style={customStyles} 
      contentLabel="Example Modal" 
      > 

      <button onClick={this.closeModal}>close</button> 

      {this.renderFilteredTransactions(this.props.data,this.props.category,this.props.month)}; 
      </Modal> 
     </div> 
    } 

    renderFilteredTransactions(trans,category,month){ 
     return <div> 
      <table> 
       <tbody className="mo-tblBody"> 
        {trans && trans.map((data,index) => 
         <tr key={data.transid}> 
          <td>{data.transid}</td> 
          <td> 
           {this.renderCategory(data.category,index,data.transid)} 
          </td> 
         </tr> 
        )} 
       </tbody> 
      </table> 
     </div> 

    } 

    handleCategoryChange(value,transIndex,transId){ 

     let trans = JSON.parse(JSON.stringify(this.props.transactions)); 

     //add or updated transaction to this.editedTransactions based on whether or not the transid already exists 
     trans.filter(item => item.transid === transId) 
     .map(item => this.editedData.set(transId, 
        Object.assign({}, item, { category: value }))); 

    } 

} 

const mapStateToProps = (state) => { 
    return {storeDataAll: state.storeDataAll, 
    storeSaveData: state.storeSaveData 
    } 
}; 

export default connect(mapStateToProps, {getDataAll,saveData})(DataViewPopup); 

Answer 1

私は私の最近のポストPractical Redux, Part 10: Managing Modals and Context Menusに質問のこの種をカバーしました。

基本的なアプローチがある：あなたがReduxの状態に機能を入れ、Reduxの状態からモーダル表示を運転している場合

• が働くであろう（モーダル・コンポーネントに小道具としてコールバック関数を渡しますが、
• は、「事前に構築された」アクションを作成し、モーダルに小道具としてそれを渡し、それがredux-promising-modalsよう
• 使用して、ミドルウェアを閉じ、「戻り値」としてモーダル派遣作用を有する）が奨励されていませんモーダルを開閉するためのアクションを追跡し、モーダル時に "戻り値"を処理するために返す約束を使用するsは閉じています。