Redux is the buzzword used to build innovative mobile as well as web applications that run in different environments, are consistent and are easy to test. It is a predictable state container which can be clubbed with any other JavaScript front-end development framework or with Vanilla JavaScript.
Still, widely used is the combination of ReactJS + Redux which is pretty hot stuff right now. Redux is like becoming a de facto to build any React app, offering an unparalleled experience to the developers with live code editing coupled with a time-traveling debugger.
Changing the landscape of technology, Redux is a complimentary library to ReactJS library solving the events (Actions) and the data (state) problems. ReactJS, the brainchild of Facebook, lacks in the unified approach to divide the app into multiple components and thus fails to keep track of the data as well as actions. Redux is the only way to solve this problem as it isolates the store having data so that all the components can interact with it to get all the state objects.
While React and Redux are not directly related – Redux controls the app’s state changes while React renders the view of the data. Redux has the ability to make your applications more performant, reliable, scalable and easier to debug.
So how to use React and Redux together:
Binding React and Redux are pretty simple, you just find top-level ReactJS components and set Redux state inside these components. When the state changes, you can use a simple command, handy to trigger the re-render.
You can also benefit from other awesome React+ Redux development tools which let you inspect the rendered tree of the ReactJS elements. This can be extremely useful for seeing how things actually appear in the browser in real-time. Some of these tools are even more impressive as it allows to maintain a track of every action and state change that occur along with giving you the freedom to travel back in time and make changes.
You can also set up the hot module replacement with web pack to make page updates as soon as you save the changes in your code – no refreshing of the browser is required. Using Redux boosts the efficiency of feedback loops to tweak your components and reducers.
There are a few other libraries that complement Redux:
- js – Immutable data structures for JavaScript! Store your state in these in order to make sure it isn’t mutated where it shouldn’t be, and to enforce reducer purity.
- redux-thunk– This is used for when your actions need to have a side effect other than updating the application state. For example, calling a REST API, or setting routes, or even dispatching other actions.
- reselect– Use this for composing able, lazily-evaluated, views into your state. For example, for a particular component you might want to:
- inject only the relevant part of the global state tree, rather than the whole thing
- inject extra derived data, like totals or validation state, without putting it all in the store
You don’t necessarily require them from the beginning. Depending on whom you ask, Redux may or may not be ‘true’ Flux. But we suggest that it’s aligned well-enough with the core ideas to call it a Flux framework, but the argument is a semantic one anyway.
