Default Wordpress WYSIWYG Editor

Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems really clear that the future web applications are all about this sweet couple.

The problem is that the process of changing developer’s mind to start thinking in React & Redux way isn’t actually smooth. Frameworks we used to apply (Backbone, Angular, jQuery, etc.) work in drastically another way, so we need some time to switch.

Obviously, when we hear about React & Redux bunch, we begin to puzzle out exactly those two words. And that’s right for a start. React serves as the view layer, Redux serves as the data one…

“Okay, I got it, — you said, — React builds my interfaces using components, Redux handles my data using the singleton data store, actions and reducer functions. Now that’s pretty clear for me and it seems like I can develop the whole new application based on it. I don’t have anything to worry about.”

Yes, you have!
The truth is that interface building and data handling are not enough to create a real production application. To create a small example like a TODO-list or something — yes. Not for something bigger.

So, the gist is the following. Let’s take a look at most of the features that you’ll have to deal with when the time comes, — and where React & Redux themselves can’t help you. Because the devil is in the details.

Reusable components
First of all, when you develop a big application with React, you need to reuse your components. There’s no way just to pass the Redux Dispatcher through the hierarchy of components to give access all of them to throw actions. You need just a small set of components that know what your application does in particular, i.e. what actions it has to change the State and what the State represents exactly. Rid most of them of that and let them do just a dumb work — display the data and handle parents’ callbacks. That’s how you’ll make them reusable.

Talking in terms of Redux those components are smart and dumb orcontainer and presentational. You could (no, you actually must!) read about it here.

When you are aware of this idea, you need a tool to apply it. So, I am pleased to present you react-redux. This package allows you to wrap up a component with a container that provides access to the Dispatcher and the Store, and keeps the wrapped component synchronized with Store mutations. In another words, it makes a component smart.

It represents the high-order component pattern — the approach that suggests you to take an existing component and pass it to a special function that wraps it up in a new one. This wrapper extends the initial component functionality in some way, and you get the profit.

Technically, mixins provided the same opportunity (if you are familiar with them), but they had a bunch of problems, so the React Team decided to cut it off in favor of composition described above. Read more on that topic inthis article.