reactxでreduxを使用して状態を変更します

Question

これは、再プレイ（再プレイまたは再プレイ）ボタンを含む私のコンポーネント（反応）です。

render() { 
    const rematchTitle = formattedMessage('App.rematch'); 

    return (
     <div className='modal-footer'> 
      <a className='btn'>{rematchTitle}</a> 
     </div> 
     ); 
    } 

ユーザーが（再び再戦プレイ）ことをクリックしたとき、私はそれにクリックイベントを与えたいbutton.And私は（私は、ユーザーがそのボタンをクリックすると、準備に状態を変更する）準備状態をトリガーするボタン。以前の開発者は準備完了状態を開発していたため、非常にうまく動作しました（準備完了状態には減速、アクションがあります）。

このボタンにonclickイベントを与えようとしましたが、this.propsは動作しません。ここでバインドしたり、this.propsを設定したりできますか？名前再取得として新しいアクションを追加する必要がありますか？ this.propsを設定しますか？動作していますか？減速機ですか？ここ

const { onPlayAgain } = this.props; 
    let PlayAgain = ''; 
    const rematchlabel = <FormattedMessage message="app.rematch"/>; 
     PlayAgainButton = (
     <a onClick={onPlayAgain } className={buttonStyleClassColored(colorBlue)}> {rematchlabel}</a> 
    ); 

はreact-reduxライブラリは、この機能を追加することが容易になり、私のコンポーネントのコード

import $ from 'jquery'; 
import React from 'react'; 

import { FormattedMessage } from 'util/IntlComponents'; 

import OkeyMatchResult from './OkeyMatchResult'; 

import { RoomState } from 'constants/AppConstants'; 


function formattedMessage(message) { 
    return <FormattedMessage message={message}/>; 
} 

class OkeyMatchResultDialog extends React.Component { 
    componentWillReceiveProps(nextProps) { 

    const currentRoomState = this.props.roomState; 
    const nextRoomState = nextProps.roomState; 




    if (currentRoomState === RoomState.PLAYING 
     && nextRoomState === RoomState.END) { 

     $('#matchResultModal').openModal({ 
     opacity: 0.5 
     }); 
    } 
    } 

    render() { 
    const matchEndTitle = formattedMessage('room_title.match_end'); 
    const rematchTitle = formattedMessage('room_title.rematch'); 
    const backToLobbyTitle = formattedMessage('room_title.back_tolobby'); 

    const { matchResult } = this.props; 

    let PlayAgainButton = ''; 
    PlayAgainButton = (
     <a onClick={alert('slm')} > {rematchTitle}</a> 
    ); 

    return (
     <div id='matchResultModal' 
      className='matchresult-modal modal modal-fixed-footer'> 
     <div className='modal-content'> 
      <h4 className='center'>{matchEndTitle}</h4> 
      <OkeyMatchResult matchResult={matchResult}/> 
     </div> 

     <div className='modal-footer'> 
      <a className='btn side-by-side'>{backToLobbyTitle}</a> 
      <a className='btn'>{PlayAgainButton}</a> 
      <a className='btn'>{rematchTitle}</a> 
     </div> 

     </div> 
    ); 
    } 
} 

export default OkeyMatchResultDialog; 

Answer 1

です。オリジナルのプレゼンテーションコンポーネントをラップし、Reduxにアクセスできる関数を元のコンポーネントのpropsに追加するReactコンポーネントを返すconnectメソッドを提供します。下のコードでは、一方向バインディング（React - > Redux）のみを注入しましたが、反対方向を追加するのは簡単です（引数を参照してconnect）。

編集コンポーネント（テストしていません）：

import $ from 'jquery'; 
import React from 'react'; 
import { connect } from 'react-redux'; 
import { FormattedMessage } from 'util/IntlComponents'; 
import OkeyMatchResult from './OkeyMatchResult'; 
import { RoomState } from 'constants/AppConstants'; 

function formattedMessage(message) { 
    return <FormattedMessage message={message}/>; 
} 

// This should return functions which internally use the Redux dispatch method (the dispatch dependency will be injected by react-redux) 
function mapDispatchToProps (dispatch) { 
    var rematchAction = {}; // Define your "rematch" Redux action here 
    return { 
     onRematch: function() => { 
      dispatch(rematchAction); // This will dispatch the action to your Redux store 
     } 
    } 
}; 

// This creates an instance of OkeyMatchResultDialog with the object returned by mapDispatchToProps injected into its props 
export default connect(null, mapDispatchToProps)(OkeyMatchResultDialog); 

// This stays a purely presentational component (not aware of Redux) 
class OkeyMatchResultDialog extends React.Component { 
    componentWillReceiveProps(nextProps) { 

    const currentRoomState = this.props.roomState; 
    const nextRoomState = nextProps.roomState; 

    if (currentRoomState === RoomState.PLAYING 
     && nextRoomState === RoomState.END) { 

     $('#matchResultModal').openModal({ 
     opacity: 0.5 
     }); 
    } 
    } 

    render() { 
    const matchEndTitle = formattedMessage('room_title.match_end'); 
    const rematchTitle = formattedMessage('room_title.rematch'); 
    const backToLobbyTitle = formattedMessage('room_title.back_tolobby'); 

    const { matchResult } = this.props; 

    let PlayAgainButton = ''; 
    PlayAgainButton = (
     <a onClick={this.props.onRematch} > {rematchTitle}</a> // Bound to the injected Redux-aware function 
    ); 

    return (
     <div id='matchResultModal' 
      className='matchresult-modal modal modal-fixed-footer'> 
     <div className='modal-content'> 
      <h4 className='center'>{matchEndTitle}</h4> 
      <OkeyMatchResult matchResult={matchResult}/> 
     </div> 

     <div className='modal-footer'> 
      <a className='btn side-by-side'>{backToLobbyTitle}</a> 
      <a className='btn'>{PlayAgainButton}</a> 
      <a className='btn'>{rematchTitle}</a> 
     </div> 

     </div> 
    ); 
    } 
}