Gọi hành động từ bộ giảm tốc khác với React và redux

Question

Tôi nhận được 2 thành phần; Thị trường và trạng thái. Thành phần trạng thái quản lý số tiền người dùng có và thị trường có các nút để mua một số thứ. Khi tôi bấm vào nút (trong thành phần thị trường), tôi muốn tiền của tôi để giảm.

Làm cách nào để tôi đạt được điều này một cách tốt nhất có thể?

Đây là thành phần ứng dụng của tôi những người có thị trường và tình trạng:

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

tôi bị ràng buộc những hành động từ trạng thái trên các thành phần thị trường (tôi cảm thấy nó không phải là điều đúng đắn nên làm, nhưng nó làm việc).

Sau này, tôi xử lý những hành động trong các thành phần Market trên một bấm vào một nút như thế này:

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 
} 

Có cách nào tốt hơn?

Cảm ơn bạn

Answer 1

Tại sao không phản ứng trên cùng một hành động trong cả hai bộ giảm tốc? Bạn có thể có mã như sau:

function status(state, action){ 
... 
    switch(action.type){ 
     case BUY_ITEM: { 
      return 'bought' 
     } 
    } 
... 
} 

function market(state, action){ 
... 
    switch(action.type){ 
     case BUY_ITEM: { 
      return {...state, action.itemId : state[action.itemId] - 1 } 
     } 
    } 
... 
} 

Với bất kỳ "mã phản hồi" nào bạn cần phải thực hiện.