How to Redux

A quick deep dive

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:

code usually located in the index.js

Compose

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

What it looks like in code:

code usually located in the index.js. Arguments passed in are functions.

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:

First the call for state change happens through dispatch happens. Connect glues everything together.
example Action. An action does something. The above example is a sign in Action that connects to a Firebase auth system and is activated when a dispatch comes through.

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:

Example of a single reducer. This one is for auth.
Example of root reducer. This file is used in the as part of createStore() in first example above.

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.

Report

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

What I learned after my first date with Redux

How to CRUD in Angular + Firebase Firestore