This article will cover the practical applications of Redux when managing state through action creators, pure functions, composed reducers, impure actions with Redux-saga and Redux Thunk and, finally, use of Redux with React. That said, there are a lot of alternatives to Redux, such as MobX, Relay, and
Flux based libraries.
Since Redux reducers are pure functions operating on immutable data, they always produce the same output given the same input, making them easy to test. Here’s an example of a reducer:
Using Redux with Immutable Libraries
Consider the following code example of a problem you’ll run into without a library to protect you:
Regardless of which library you use, Redux will behave the same. Let’s compare the pros and cons of both so that you’re able to pick whichever one is best suited for your use case:
Redux and Multiple Reducers
Another useful feature of Redux is the ability to compose reducers together.This allows you to create much more complicated applications, and in an application of any appreciable size, you will inevitably have multiple types of state (current user, the list of posts loaded, etc). Redux supports (and encourages) this use case by naturally providing the
With the above code, you can have a component that relies on
the and another component that relies on the . This also improves performance as any single component will only be subscribing to whatever branch(es) of the tree concerns them.
Impure Actions in Redux
Two very common middleware libraries are Redux Thunk and Redux-saga. Redux Thunk is written in an imperative style, while Redux-saga is written in a functional style. Let’s compare both.
Redux Thunk supports impure actions within Redux by using thunks, functions that return other chain-able functions. To use Redux-Thunk, you must first mount the Redux Thunk middleware to the store:
Now we can perform impure actions (such as performing an API call) by dispatching a thunk to the Redux store:
It’s important to note that using thunks can make your code hard to test and makes it harder to reason through code flow.
First, let’s mount the Redux-saga middleware to our store:
Now let’s create our saga:
Working with React
Container components, on the other hand, describe how things should function, are aware of Redux, dispatch Redux actions directly to perform mutations and are generally generated by React-Redux. They are often paired with a presentational component, providing its props.
Let’s write a presentational component and connect it to Redux via React-Redux:
Note that this is a dumb component that completely relies on its props to function. This is
great, because it makes the React component easy to test and easy to compose. Let’s look at how to connect this component to Redux now, but first let’s cover what a Higher Order Component is.
Higher Order Components
Here’s how you do it:
Now to use our container component we must use the
Providercomponent in React-Redux to tell the container component what store to use:
Build Code Confidence with Redux
With this newfound knowledge of Redux, its numerous supporting libraries and its framework connection with React.js, you can easily limit the number of mutations in your application through state control. Strong state control, in turn, lets
move faster and create a solid code base with more confidence. you you
This blog is listed under Development & Implementations Community
Share your perspective
Share your achievement or new finding or bring a new tech idea to life. Your IT community is waiting!