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:
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:
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: