reactjs - Handling updates to store with React/Redux and lifecycle events -

i'm using react redux on front end , using rails api handle backend. @ present, trying update list of articles based on user addition of article. articleform component fires action creator updating articlelist. however, @ present life cycle method componentwillupdate firing continuously making axios requests rails, , rails keeps querying database , sending articlelist.

note: have tried using shouldcomponentupdate such no avail, dom doesn't update:

// shouldcomponentupdate(newprops){   //   return newprops.articlelist !== this.props.articlelist   // } 

my question is: how can use react's lifecycle methods avoid happening , only happening when articlelist updates. going down wrong path using lifecycle methods? i'm new react/redux , advice helpful!

i have following container:

    import react, { component } 'react' import { connect } 'react-redux' import { bindactioncreators } 'redux' import articleform './articleform' import articlelist './articlelist' import removearticle '../actions/removearticle' import fetcharticles '../actions/fetcharticles' import updatearticlelist '../actions/updatearticlelist'  class dumbarticlecontainer extends component {   componentwillmount() {     this.props.fetcharticles()   }    // shouldcomponentupdate(newprops){   //   return newprops.articlelist !== this.props.articlelist   // }    componentwillupdate(newprops){     if (newprops.articlelist.articlelist.count !== this.props.articlelist.articlelist.count){       this.props.updatearticlelist()     }   }    render() {     return(       <div>         <articleform />         <articlelist articlelist={this.props.articlelist} />       </div>     )   } }  const articlecontainer = connect(mapstatetoprops, mapdispatchtoprops)(dumbarticlecontainer)  function mapstatetoprops(state) {   return {articlelist: state.articlelist} }  function mapdispatchtoprops(dispatch) {   return bindactioncreators({removearticle, fetcharticles, updatearticlelist}, dispatch); }  export default articlecontainer 

here articleform

import react, { component, proptypes } 'react' import { reduxform } 'redux-form' import addarticle '../actions/addarticle.js'  class articleform extends component {    constructor(props) {     super(props)     this.state = {disabled: true}   }    /* article elements displayed conditionally based on local state */   togglestate(){     this.setstate({       disabled: !this.state.disabled     })   }    handleformsubmit(props) {     event.preventdefault()     const {resetform} = this.props      this.props.addarticle(props).then( ()=>{       var router = require('react-router')       router.browserhistory.push('/dashboard')       resetform()     })   }    render() {     const disabled = this.state.disabled ? 'disabled' : ''     const hidden = this.state.disabled ? 'hidden' : ''      const {fields: {title, url}, handlesubmit} = this.props;      return (       <div classname="article-form">          <form onsubmit={handlesubmit(this.handleformsubmit.bind(this))}>               <button classname="article-form-btn"                       hidden={!hidden}                       onclick={this.togglestate.bind(this)}                       >                       + add article               </ button>               <input classname="article-form-input"                      hidden={hidden}                      type="textarea"                      placeholder="title"                      {...title}                      />                <input classname="article-form-input"                      hidden={hidden}                      type="textarea"                      placeholder="paste link"                      {...url}                      />                { this.state.disabled                 ? ''                 : <input classname="article-form-input"                          type="submit"                          value="save"                         />               }         </form>       </div>     );   } }  export default reduxform({     form: 'articleform',     fields: ['title', 'url']   },   null,   { addarticle })(articleform); 

and articlelist

import react, { component, proptypes } 'react' import { connect } 'react-redux' import { bindactioncreators } 'redux' import removearticle '../actions/removearticle.js' import fetcharticles '../actions/fetcharticles' import { listgroup } 'react-bootstrap' import { listgroupitem } 'react-bootstrap'  class article extends component {     render(){     var articlelist = this.props.articlelist.articlelist      return(       <div>         <listgroup>            { articlelist.slice(articlelist.length - 10, articlelist.length)             .map( (article) => {               return(                 <listgroupitem href="#" header={article.attributes.title}>                   {article.attributes.url}                 </listgroupitem>               )}           )}          </listgroup>         <div> view articles </div>       </div>      )   } }  const articlelist = connect(mapstatetoprops, mapdispatchtoprops)(article)  function mapstatetoprops(state) {   return {articlelist: state.articlelist} }  function mapdispatchtoprops(dispatch) {   return  {removearticle: bindactioncreators({removearticle}, dispatch),   fetcharticles: bindactioncreators({fetcharticles}, dispatch)     } }  export default articlelist 

action creator:

so here action creator import axios 'axios'

import axios 'axios'  function updatearticlelist(){    const url = 'http://localhost:3000/api/v1/articles'   return axios.get(url).then( (response)=> {     return {       type: 'update_article_list',       payload: response.data     }   }) } export default updatearticlelist 

and reducer:

   export default function articlereducer(state = {articlelist: []}, action) {   switch(action.type){     case 'fetch_articles':       return object.assign({}, state, {articlelist: action.payload.data});     case 'update_article_list':       return object.assign({}, state, {articlelist: action.payload.data});     default:       return state   } } 

there no issue store nor action creators nor reducers, working pretty well. can't replicate hundreds of queries rails performing happy include other code should need see it.

thanks!

your mapdispatchtoprops using bindactioncreators wrong. instead of

function mapdispatchtoprops(dispatch) {   return  {removearticle: bindactioncreators({removearticle}, dispatch),   fetcharticles: bindactioncreators({fetcharticles}, dispatch)     } } 

you should use

function mapdispatchtoprops(dispatch) {   return bindactioncreators({removearticle, fetcharticles}, dispatch); } 

bindactioncreators can, name suggests, bind more 1 action creator.

this won't solve issue answer place put nicely.

note you'll need fix how you're using well. no more double names.