brocoders / redux-async-connect

It allows you to request async data, store them in redux state and connect them to your react component.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Loading data gets frozen.

tonis2 opened this issue · comments

commented

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

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

@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

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.