Chiamare un'azione da un riduttore diverso con React e redux

Question

Ho ottenuto 2 componenti; Un mercato e uno status. La componente di stato gestisce la quantità di denaro che l'utente ha e il mercato ha i pulsanti per acquistare alcune cose. Quando clicco sul pulsante (nel componente di mercato), voglio che i miei soldi diminuiscano.

Come posso ottenere ciò nel miglior modo possibile?

Questa è la mia componente App che ha il mercato e Stato:

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

ho legato le azioni dallo stato sulla componente mercato (mi sento non è la cosa giusta da fare, ma ha funzionato).

Dopo questo, mi occupo di queste azioni nel componente di mercato su un clic di un pulsante come questo:

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'è un modo migliore?

Grazie

Answer 1

Perché non reagisce sulla stessa azione in entrambi i riduttori? Potresti avere un codice come questo:

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 } 
     } 
    } 
... 
} 

Con qualunque "codice di reazione" è necessario eseguire.