20

2 つのコンポーネントを取得しました。マーケットとステータス。ステータスコンポーネントはユーザーが持っている金額を管理し、市場にはいくつかのものを購入するためのボタンがあります. (市場コンポーネントで) ボタンをクリックすると、お金が減少します。

どうすればこれを可能な限り最良の方法で達成できますか?

これは、Market と Status を持つ私の App コンポーネントです。

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as MarketActions from '../actions/market-actions';
import * as StatusActions from '../actions/status-actions';

import Market from './Market.react';
import Status from './Status.react';

export default class App extends React.Component {
  render() {
    const { dispatch, market, status } = this.props;

    return (
      <div>
        <h1>App</h1>
        <Link to='/'>App</Link>{' '}<Link to='/home'>Home</Link>
        <Status status={status} {...bindActionCreators(StatusActions, dispatch)} />
        <Market market={market} {...bindActionCreators(MarketActions, dispatch)} {...bindActionCreators(StatusActions, dispatch)} />
        {this.props.children}
      </div>
    );
  }
}

export default connect(state => ({ market: state.market, status: state.status }))(App);

市場コンポーネントのステータスからアクションをバインドしました (これは正しいことではないと思いますが、うまくいきました)。

この後、次のようなボタンをクリックするだけで、Market コンポーネントでこれらのアクションを処理します。

handleBuyClick(e) {
  let { index, price } = e.target.dataset;
  index = parseInt(index);
  price = parseInt(price);

  this.props.buyItem(index);
  this.props.changeMoney(price); //this bugs me, i think it don't belongs there
}

より良い方法はありますか?

ありがとうございました

4

1 に答える 1