last day (14 days later) » 

6:12 AM
0
A: Redux loading indicator not working

JacobIn your mapStateToProps, you are creating a postList property but then accessing this.props.loading and this.props.posts. Either do this instead: function mapStateToProps(state) { return state.postList; } ...so that all the props in state.postList are "flattened" into your component, or have...

 
I'm getting some undefined errors here. Is it because of how my combine reducer is setup?: export default combineReducers({ posts: PostReducer, });.
 
Yeah, that means things would be under state.posts.postList; you could really stand to flatten things out. You don't need to nest things under a postList property because combineReducers already composes reducer states under separate properties.
 
Definitely agree but I also have a nested activePost object in my reducer. Left it out for the sake of brevity.
Despite all of this I still seem to be getting the same result for some reason.
 
You may want to post a follow-up to show what you have now. I'd also recommend installing the React and Redux dev tools so you can easily see your store state and component props.
 
Sure gimme a sec.
Everything's updated based of your answer.
 
6:12 AM
You still have a mismatch between the structure of what you're returning in mapStateToProps and the properties you're consuming in your component. mapStateToProps is now creating a structure with a props and loading property, but you're accessing this.props.postList.posts The properties you return from mapStateToProps is what shows up in this.props.
Hi, here in chat. What do you now have in mapStateToProps?
 
hey
thanks for the help
so based off your last comment
where am I writing the wrong code?
just a little confused atm
 
You have this in your render method still? this.renderPosts(this.props.postList.posts)
 
yeah
 
Notice if your `connectStateToProps` is doing this:

```
return {
props: state.posts.postList.posts,
loading: state.posts.postList.loading
}
```
...there is no postList property there.
You're basically using mismatching property names.
The exact same props returned in connectStateToProps are what you should read in your component's rendering code.
 
6:18 AM
Recommendation: in your `connectStateToProps`, do this:

return {
posts: state.posts.postList.posts,
loading: state.posts.postList.loading
}

...and in your render method:

`this.renderPosts(this.props.posts)`
 
so how would I pass in the list of posts in the renderPosts method?
o ok lemme try that now
damn same thing
"Loading" div never shows
lemme share with you what the Redux Dev Inspector shows in each action
 
This is also incorrect:

render() {
const { posts, loading } = this.props.postList;

return (
<div>
{ loading ? <div>Loading...</div> : this.renderPosts(posts); }
</div>
);
}
It should be const { posts, loading } = this.props
connectStateToProps does not return a postList property.
 
With that fix I get no message either
 
With React dev tools, are you able to see the props being passed into your connected component?
 
in the state?
 
6:26 AM
Redux dev tools will tell you your store's state, React dev tools will show your components.
 
lemme check
 
Both are useful for solving the problem. The loading indicator not showing up could either mean you're not connecting to your store state properly or that the store state isn't correct.
 
for the time being here's what I get in redux
 
Looks like those are all good, so the problem is probably on the React component side, whether it's the connecting to props or the render method.
Can you post/share your current component code?
 
yeah
import React, { Component } from 'react';

import { Link } from 'react-router';

import { connect } from 'react-redux';

import {
fetchPosts, fetchPostsSuccess, fetchPostsFailure
} from '../../actions/posts_actions';

class PostIndex extends Component {
componentWillMount() {
this.props.fetchPosts();
}

fetchPosts(posts) {
return posts.map(post => {
return (
<tr key={ post.id }>
<td>
<Link to={`/posts/edit/${post.id}`}>
{ post.name }
</Link>
</td>
</tr>
);
});
}

render() {
const { posts, loading } = this.props
 
6:33 AM
Heh, is it just as simple as it being a <div/> in a <tbody/>, which is not allowed?
Try changing it to <tr><td>Loading...</td></tr>
 
lemme see
I also made a fiddle just to make it a little more readable:
 
Is it just the loading indicator or also the posts that aren't showing up?
 
the loading indicator
like when I manually reload the page the container element will be blank for a brief moment and then load in the content
in that brief moment the "Loading" div doesn't show
and nah, the changing of the elements had no affect
 
With the redux dev tools, you can go back in time and put it back in that loading state.
If you do that, maybe we can inspect the DOM and see what's being rendered.
 
doing so now
It does look like the loading indicator is showing
even with the original code
it looks like it was rendering so quickly that the frame didn't even show
 
6:41 AM
Sweet, glad it's working.
 
it's just really strange though that I wasn't able to see it on screen
my bad man didn't mean to spend so much time on this
 
"My database is too fast" is a good problem to have :D
 
yeah
ahahah
 
Have a good night/morning/whatever is appropriate to your timezone
 
right now I'm on local which may have something to do with it
thanks you too
and thanks for recommending the Redux Dev Tools
might've saved me an additional day of debugging
 

last day (14 days later) »