Last night I ended up playing with more Redux and ended up in a conversation about in on Twitter. It appears that a lot of people seem to dislike it due to the multitude of new terms and ideas required to get up and running with it.

Redux isn’t that bad — especially if you’ve already got a grounding in another framework like Angular. At the end of the day, it’s all the same, just written and structured differently. But for complete newbies, I can understand your perspective too. It can be a lot to take in if you’re already trying to figure out a million different other things.

So to make life easier, I’ve decided to summarize the common core Redux terms and concepts below based on my experiences and understanding of the nifty little awesome library.

Store

Don’t overthink it. This holds the application state. You can access a state by using getState() and update it through a dispatch.

Think of a store as a container for all your states and you should only have one. But if you want or need multiple stores, use a thing called reducer composition instead. This is because Redux wants you to only have a single source of truth.

What in looks like in code:

Compose

The ability to pass in a function into your Redux store.

What it looks like in code:

middleware

The thing that connects Redux to another third party application. For example, if you want to use Redux with a database, you’re going to need middleware to connect up the two.

redux-thunk is a middleware. It’s not actually part of Redux, despite the name, and sits in between Redux and your async source call. This is because redux-thunk allows you to return a function instead of an action object.

Actions, Dispatch & Action Creators

action. Noun. the fact or process of doing something, typically to achieve an aim. — Dictionary.com

Redux’ purpose is to be your state container. The action is the act of changing those stored states. This is done via a thing called dispatch — or via the store.dispatch() function.

Action creators return an action.

dispatch is the action of updating the state.

What it looks like in code:

Reducers

Pure functions that take in a state and action to return a new state.

A reducer is a space where you can configure your final state to be stored in redux based on what application sent via the action.

For example, a login state might start off looking like this: {authError: null}

Then your action gives back the value of LOGIN_ERROR after your application tried to log in and failed.

Your reducer takes this value and attaches it to {authError: null} and turns it into {authError: 'LOGIN_ERROR'} for Redux’ state container to store.

There is a central store that’s like a directory of all your reducers. It often features in the form of rootReducer.js

What it looks like in code:

How it all fits together

Here’s a diagram on how everything is connected to each other. Everything starts at a component and ends at a component. The life cycle might look like a lot of steps but each step has its singular and containerized purpose.

Final words

Redux is actually quite simple — along with being lightweight. There aren’t many new terms in the grand scheme of things. You don’t have to use it with React — but currently, it is the most popular library because it is the most effective and easiest to implement.

The beauty of Redux is that it can be used anywhere as a single source of truth when it comes to states. This means that if you were to switch out React, that area of your logic is still mostly reusable. This is because Redux containerizes your states and sections it off from the rest of your application.

Comments

0 comments