Things I’ve learned while working with React and Redux

React is taking over the web as it’s currently used in countless applications and there’s no wonder why this is happening. When it came out in the first place, it made everyone talk about how good it was. The Virtual Dom was a breakthrough and it took the development of applications to a whole new level. I was pretty amazed by all these cool things, so I was looking forward to using it in a project.

A couple months ago, I started digging through React docs and tutorials to get an idea of how I could make this work. I soon realized that I was going to need a library like Redux to manage the state and actions of the app. If you are like me, with no background knowledge in a similar library, like Flux, you should know that all of this info could be a bit overwhelming.

So here are the things I’ve learned while building a web app with React and Redux:

— An introduction to JSX could be useful. JSX is a syntax extension to JavaScript and it’s recommended while building React apps. Getting an idea of its basics, before going deep in React docs, will get you a better understanding of the examples and tutorials.

— Learning webpack basics would be a great idea as well. Webpack is a module bundler and to get the most of ES6, JSX, and bundling, you will have to use it. If you are going to build your app with the create-react-app tool and go with the default options of it, the webpack configuration is ready by default, so you don’t have to worry about this.

— Components and their props are important. Components let you split your UI into pieces. Each component is an independent, reusable piece of code that can be used everywhere in your app. The inputs they accept are called props. As React documentation states: a component must never modify its own props. It is also highly recommended to create small components (like buttons, inputs, etc.) that can be reused in different parts of your application.

Take a loot at the following example. We created a simple component that accepts several inputs as its props.

And in the code below, you can see how easily we can use it.

— Understanding state and how it works. Components have their own local state that is similar to props, but it’s private and it’s only controlled by the component it belongs to. This means that each component has access only to its state and can’t modify any other state than its own. The state can be passed as a property to any other component that needs to read it.

— Organizing state can be a lot better with Redux. While Redux concept could be confusing at first, it is worth trying. Managing state over time can be complex, so you need a tool like Redux to help you get through this.

Its basic idea is that you store the whole state of the app in a one object tree that is kept in a single store. This state object is read-only and can be modified only by emitting an action. Actions are just plain javascript objects, which are being returned by functions, called actions creators, each time a new change is about to happen. When a new action is emitted, a reducer is responsible for handling this event. Reducers are just pure functions, that take the previous state and an action, and return the next state of the app.

When implementing a React-Redux application, components get their state from the Redux store, and they send their state changes to the store as well. Every time the state changes, the components that have access to it, will update their content based on this change.

As you can see in the above image, the data flow is much easier with Redux and that’s the reason why so many developers choose to use it in their applications.

Summary

React is an amazing library for developing applications and Redux makes the management of the state easier than it would normally be. I hope that this article has been interesting for you and that you find some of it useful.

Thanks for reading :)