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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -