React js Redux: Adventuring in Javascript

I’ve been playing with React js Redux. It’s pretty easy to understand. I can see how it can help organize my code as an app gets more complex. I took my original code, using only React js to make an AJAX request to the Deck of Cards API and Redux-ify it. Redux keeps the store separate from my display code. A good chunk of it was wiring code. Here are the interesting parts:

The code that requests data was separated from the root display component and now exist as a plain javascript. The only thing the display component is used for is just displaying the data with React js. Now that the easy part is done. Let’s have some fun!

React and AJAX: Super Quick Simple Example

Say you needed to make a quick prototype in React and AJAX to populate your React component with some JSON. How you would you do it?┬áThat’s my current adventure in exploring React and how to use it. The simplest way is to make your calls in the root component and send the state down into the other components through props. Here’s a super quick example:

In this example, the root component, once it’s loaded, it sends off an Ajax request for data from a server. Once that returns, it updates the component’s state, which passes that data through props of another component. The cool thing is, whenever that state updates, through clicks or whatever, you don’t have to do anything to update the display. I come from the old school background of plain old javascript and jquery, so this is pretty magical. I’m totally excited to see what else React can do.

This works as long as your React component is simple. For bigger applications, where there are multiple React components nested within each other, ]multiple sources generating events, and multiple endpoints for AJAX calls, this could get messy and hard to understand which component is making what call. Plus, this isn’t exactly the most reusable React component ever written, but there’s probably a way to do it. I mean that’s the whole game of React: make super reusable and independent components for your UI. There must be a way to separate React and Ajax so that the components don’t have to know about where the data is coming from.

Check out these article for more info on several different approaches on how to make AJAX calls in your React components: