javascript - Dispatch different actions in redux -
i have (react) container component. it's children need different data different api endpoints, want dispatch 2 actions same time (both asynchronous).
this doesn't seem possible. if have both dispatches, activesensors
empty...
class dashboard extends react.component { static proptypes = { userdata: react.proptypes.array.isrequired, activesensors: react.proptypes.object.isrequired }; static contexttypes = { store: react.proptypes.object }; constructor(props) { super(props); } componentwillmount() { const { store } = this.context; store.dispatch(fetchactivesensordataforallsensors()); store.dispatch(fetchuserdata()); } render() { return ( <div> <analyticspanel activesensors={this.props.activesensors}/> <searchcustomer userdata={this.props.userdata}/> </div> ); } } export default connect((state)=> { return { userdata: state.userdata.data, activesensors: state.activesensorsall.sensors } })(dashboard);
edit: see source full component.
i haven't used this.context.store.dispatch
method code uses, don't think way should doing things. because muddies line between container , presentational components. presentational components don't need access store
, , there other methods don't have (albeit pedantic) drawback.
my component files typically this:
import react 'react'; import { connect } 'react-redux'; import * actions './actions'; export class container react.component { componentwillmount() { // conical way const { fetchactivesensordataforallsensors, fetchuserdata } = this.props; fetchactivesensordataforallsensors(); fetchuserdata(); // less conical way // const { dispatch } = this.props; // const { fetchactivesensordataforallsensors, fetchuserdata } = actions; // dispatch(fetchactivesensordataforallsensors()); // dispatch(fetchuserdata()); } render() { return ( <div> <analyticspanel activesensors={this.props.activesensors}/> <searchcustomer userdata={this.props.userdata}/> </div> ); } } function mapstatetoprops(state) { return { activesensors: state.activesensorsall.sensors, userdata: state.userdata.data } } export default connect(mapstatetoprops, actions)(container);
Comments
Post a Comment