React With Rails API Server

Setting up React

Getting started is very similar to a lot of other apps you can simply type npx create-react-app my-app-name in your terminal and get started. After everything is created for the app its time to setup. I used Redux with Thunk middleware in this app so first thing to do was to install this software. Redux is a pretty awesome tool when it comes to React to help it speed up the process of information flow to all of your components. Thunk is used in the app so that you can make dispatch calls inside of fetch requests.

The Power of Redux

Without using Redux in your React app you will have to pass down all information that you want to share with your components through props. It will start at you parent prop and then traverse down the tree until it reaches the place you need it passing the prop down each time. Redux comes in to stop this process and simplify it. Instead you can map whatever dispatch actions or state from your action files and reducers. It makes a central location that connects all components that need the information when they need it. To do so you simply connect the component and then map your state or dispatch actions to the components props. Instead of passing it all the way down from the parent prop. In the example below you can see this.

Then you can utilize your props inside the components.

Connecting the Backend

In my app I used Rails as a server for the backend data. Which are users and meals that users like. To do this I make fetch requests to the Rails server and pull the info I need from it. Also to persist data give the server the info it needs.

This got a little trick as I had to use the cors gem in Rails and remember to include credentials from the front end. What's happening is when a user is created or logged in the backend sends a cookie to the browser and then when the browser requests information from the backend you have to include that cookie otherwise the server will not recognize the initialized session.

Thunk Comes into Play

Now when you make a fetch request be it an external server you the one that you created in React you will have to dispatch that action to another so that you can update your state. To do so you have to include the middleware when setting up your Redux Store.

This gives your app the ability to dispatch an action with the promise from a fetch request. You can see in that last .then that this is where it takes place.

Conclusion

React is quite powerful by itself. But, when you include just a couple of extra tools in it, it becomes so much more. Thunk helps with your actions to get your state updated. Redux makes a centralized location to speed up your app load times. In conjunction they help make your app very useful.