brocoders / redux-async-connect

It allows you to request async data, store them in redux state and connect them to your react component.
645 stars 103 forks source link

Loading data gets frozen. #49

Open tonis2 opened 8 years ago

tonis2 commented 8 years ago

Hei, thanks for great project but i have a issue and im not sure if this is bug or problem with my setup,

i have reducer like this https://gist.github.com/tonis2/e39a16d198b689d80a8c

now on client i have

import React from 'react';
import { connect } from 'react-redux'
import { asyncConnect } from 'redux-async-connect';
import { getData } from '../../reducers/getData'
@asyncConnect([{
  promise: ({store: {dispatch, getState}}) => {
      return dispatch(getData());
  }
 }])
@connect(state => ({teasers: state.Data}))
export default class dashboard extends React.Component {

componentDidMount() {
  console.log(this.props.teasers)
}
  render() {
    return (
      <section id="dashboard">
      </section>
    );
  }
}

Seems okay ? but it will never start the reducer action, and the data will be empty. Only after i press commit on redux-devtools it will load the data :/ Reducers action seems to get stuck

t0x1c123 commented 8 years ago

Yeah same here. I'm using https://github.com/erikras/react-redux-universal-hot-example and to display data i need to push commit in devtools

sars commented 8 years ago

@tonis2 , thanks for kind words :) it seems your action returns undefined instead of promise: https://gist.github.com/tonis2/e39a16d198b689d80a8c#file-gistfile1-txt-L32

it shouldn't cause freezing problem however... https://github.com/Rezonans/redux-async-connect/blob/master/modules/asyncConnect.js#L111

blainegarrett commented 8 years ago

I'm running into something similarish.

After a ton of debugging, I believe the problem (at least my problem), is that when using @connect() with a mapStateToProps function and an error occurs within this function, something is suppressed and likely some promise is not resolved.

I believe this is the simplest block of code to recreate:

function mapStateToProps(state, ownProps) {
  return { posts: state.thing_that_does_not_exist.something} // This should throw 'Cannot read property 'something' of undefined'
}
export default class MyContainer extends Component {
 ...
}

Note you don't even need the @asyncConnect. I have not tested the case if this occurs with vanilla redux, but I suspect it is something either in my setup or the current release candidate. I'll test more in the morning.