1. 25
    Filter State Data in Redux with a Selector Function and React Router
    4m 22s

Filter State Data in Redux with a Selector Function and React Router

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the ownProps parameter of mapStateToProps.

Erick Lee
Erick Lee
~ 4 years ago

Great course Andrew,

I am having a problem on this lesson where the application is not recognizing whether task is active or completed. I have validated that checking a box changes the todo in the json-server DB and have made the change from defaultChecked to checked on the checkbox input. However /active shows both items with checkboxes and those without, while completed does not show anything. The strange thing is that in the browser ALL of the list items show the same value for the checkbox <input type="checkbox" value="on">.

Erick Lee
Erick Lee
~ 4 years ago

I found my error. Thanks again for a great course.

Andy Van Slaars
Andy Van Slaarsinstructor
~ 4 years ago

I found my error. Thanks again for a great course.

Sorry I didn't see your original question earlier. Glad you were able to find a solution!

Paul
Paul
~ 4 years ago

Hey Andrew,

Having nearly completed this excellent, course, I've stumbled on an issue attempting to view all tasks. It appears that accessing http://localhost:3000/ ends up with a stripped trailing slack http://localhost:3000, and thus the path='/:filter' fails. If I change the <Link to='all'> then it works okay.

Any pointers? Cheers

Andy Van Slaars
Andy Van Slaarsinstructor
~ 4 years ago

Paul,

Thanks, glad you've enjoyed the course so far. This might be because you are missing the ? on the filter parameter. It's a small difference and easy to miss, but this way, even when filter is undefined it will match the route, and render the component. Without that ?, it won't match the route, and the todo list component isn't rendered.

https://github.com/avanslaars/egghead_react_redux_course/blob/25-filter-todos/src/App.js#L22

Hope this clears it up for you!

Paul
Paul
~ 4 years ago

Cheers, that worked a treat!