Component constantly re-rendering when dispatching action (promise) - reactjs

Question

When I run the code with this.props.addChannel(payload);
Channel Component keeps re-rendering like its in an infinity loop.
When I replace it with console.log(payload) it works fine.
const mapStateToProps = state => ({
user: state.shared.user,
});
const mapDispatchToProps = dispatch => ({
addChannel: (payload) => dispatch({type:ADD_CHANNEL, payload})
});
class Channel extends Component{
componentDidMount(){
const payload = api.Channels.getAll();
this.props.addChannel(payload);
//console.log("Channels", payload)
}
render(){
return(
<div>
<AddChannel />
<ChannelList channels={[{text:"test"}]} />
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Channel);
The api code:
const Channels = {
getAll: () => requests.get('channels/twitter/')
};
The Reducer:
import {ADD_CHANNEL} from '../constants/ActionTypes';
export default (state={}, action={}) => {
switch(action.type){
case ADD_CHANNEL:
return {...state};
default:
return {...state};
}
};
The Routes Component:
import React,{Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import { connect } from 'react-redux';
import Auth from './containers/Auth';
import Channel from './containers/Channel';
import Messages from './containers/Messages';
import withAuth from './components/Auth/WithAuth';
const mapStateToProps = state => ({
user: state.shared.user,
});
class Routes extends Component{
render(){
const user = this.props.user;
return (
<Switch>
<Route exact path='/' component={Auth} />
<Route path='/messages' component={withAuth(Messages, user)} />
<Route exact path='/channels' component={withAuth(Channel, user)} />
</Switch>
);
}
};
export default connect(mapStateToProps, ()=>({}),null,{pure:false})(Routes);

Answer 1

The reason for the loop is probably the call to your higher-order component withAuth in the component prop of your Route's. (see Route component docs)
This call will return a new component each time Routes is rendered, which will mount a fresh Channel with an accompanying api call and redux store update. Because of {pure: false}, the store update will then trigger a rerendering of Routes (even though user hasn't changed) and start a new cycle of the loop.
If you drop {pure: false} (which doesn't seem useful here) you'll probably end the loop, but the Channel component will still do unnecessary re-mounting if one of its ancestors rerenders, resetting all local component state in Channel and below.
To fix this, you could refactor withAuth to get user as a prop rather than a parameter, and call it on the top level, outside the Routes class:
const AuthMessages = withAuth(Messages);
const AuthChannel = withAuth(Channel);
Now you can pass user to these components by using the render prop of Route:
<Route path='/messages' render={(props) => <AuthMessages {...props} user={user}/>}/>
<Route exact path='/channels' render={(props) => <AuthChannel {...props} user={user}/>}/>
Besides this, you will probably want to keep the channels in the store and handle the api call asynchronously, but I assume this code is more of a work in progress.