How we Redux — Part 5 (Components)

Welcome to the last post on “How we Redux”. Today is the fifth and final part in this series and I am so glad to have had the opportunity to write this for everyone.

Basic HTML:

Make a RootComponent.jsx

So the first component we build is the Root Component. The Root Component is generally the entry point into your feature, page, etc. The interesting bit here is the Provider. In the last part, we went over Reducers and Stores. The Provider component from the react-redux module allows us to pass our Store down to child components. ReactRedux allows this connection to the store by providing a “connect” function to children of the wrapped Provider. The best way to remember what a Provider does is


It provides a connection between the Redux Store and child components.

What is this connection? We’ll get into the “connect” function shortly… but first let’s set up the TodoApp component and finish our component tree.

Okay, so we have our basic component tree setup! It’s time to get real. We have every piece we need now to finish up this app up! Let’s go through it one by one.

Add Todos

Add Todo

We have an input field and we are using a ref to grab the value. When we click on our button we will Dispatch our “Side Effect” Action Creator which will return a function that calls our Meteor Method for “addTodo”. But where did this “dispatch” prop come from? To understand that, we need to understand “connect”.

Connect Revisited

Alright, let’s look at “connect” a little closer. The sole purpose of the “connect” function is to connect React components to a Redux Store. The great thing about connect is that it returns a new, connected component class to the component passed into it. We utilize a connected component in 2 ways:

  1. To dispatch our Actions or “Side Effect” Actions inside our React components. This is because connected components have access to the dispatch function in “props”.
  2. The second utility we have is the power to subscribe to Redux stores through props. Anytime we update the Redux store via our dispatch process, it will call mapStateToProps, the first argument of the connect function. This allows our component to be “reactive” to actions and this will be useful to feed our UI State to power Domain State, like our publications or methods.

Todo Items

Todo Item

Pagination

Pagination Component

This is our Pagination component leveraging the ReactPaginate component. This component is stateless and needs a page click event handler and pageCount. We’ll supplement this with a function that dispatches to our pageSkip reducer and the Counts we get from our publication.

The Todo List

Todo List

Now that we have “connect” sorted out, let’s build our TodoList. We’ll be utilizing reactMixin to extend our React components with Meteor’s reactive extension: ReactMeteorData. In “getMeteorData” we will grab the visibilityFilter and pageSkip from our Redux Store, via props. Then we subscribe to our “getTodos” publication with these values. We then return the todoList, the count of Todos from the server, and lastly the ready from the subscription handle.

Next, we call “this.data” in our render functions to access the object we returned in getMeteorData. We map over our todoList and return a Todo component. If the todoCount is greater than our per page list threshold, we’ll render our pagination component.

Filters

Filtering todos is pretty simple now! We just need to set up our filter components and dispatch our setVisibilityFilter Action Creator. This will change the Redux Store value for the visibilityFilter and the change in props will resubscribe to our publication based on the filter state.

FilterLink

Link

We’ll use a stateless component function to represent a Link component. All it takes is some child values, an active state condition, and lastly an onClick handler to dispatch the actions.

Final Product

There you have it! A Paginated Todo list using Meteor and Redux. You can see the full app completed here.

Thanks everyone for the great feedback and thumbs! Also, thanks to the people that caught all my errors :). Let’s keep this discussion going as this is only one way to handle Redux and Meteor!

If you like this series, recommend it to your friends! Follow me on twitter:@abhiaiyer

Getting into React? Check out my post on JSX here.