Redux & Flux

What has to do Redux with Flux? How is a Dispatch related with an Action and how can I change the View of my Component?

In this article we will discuss how Flux is related with Redux and with code examples, how to implement Redux in a React app. So, let’s not wait any more time!

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow.

Flux schema made by Gemma Teixidó on https://excalidraw.com/

View of the Component

View is the user interface component. It is responsible for rendering the user interface and for handling the user interaction.

Action Creator

An action is a plain object that contains all information necessary to do that action. Actions have a type property identifying the action type.

The practice of the Action Creator is to encapsulate the code, creating actions in functions. These functions that create and dispatch actions are called action creators.

Dispatcher

Dispatcher is a single object that broadcasts actions/events to all registered stores. Stores need to register for events when the application starts.

Store

A store listens for all actions and decides on which of them to act. This usually means a switch statement. Once the store has made the state changes, it will emit a change event. The store is an event emitter.

Okey but what has Flux to do with Redux besides de ending of the two words “ux”…? Redux came to live when Dan Abramov asked himself “What if your Flux store was not a store but a reducer function?”

Redux was created in 2015 by Dan Abramov and Andrew Clark (author of the Flux implementation Flummox).

Is a state management library for front end applications. Developers commonly use it with React through the react-redux package, but it can also stand alone — so you can use it in any front end framework or library, including Vanilla JavaScript.

Reducers

Reducers will update the state based on the actionType, this actions are objects that determine what will be done. Reducers takes in the state and the action.

Create a folder and name it Redux, now add a folder called reducers and add a file for the following reducer, name it, for example, counterReducer.

Reducer code example by Gemma Teixidó

In this case we are making a counter that with an initial state of “1” and depending the actionType of “INCREMENT”, “DECREMENT” or “RESET” it will return the new state modified with “+ 1”, “- 1” or “0”.

We also have to return a default state that will return the state “1” if neither of the actionType defined are called.

CombineReducers

It’s important to create a file where we will store all our reducers. Inside our reducers folder add an index file for this part of the code. We will use the combine reducers helper function from Redux.

In this index file we will write the following code to define all of our reducers in a variable named rootReducer, since we just have one reducer we will just have our counterReducer.

combineReducers code example by Gemma Teixidó

Store

We will create a folder called store, inside add an index file where our store will be located.

First we are going to create the store and then we will import it in our index.jsx.

store code example by Gemma Teixidó

First of all we see composeEnhancers, this is a very interesting extension from Chrome that will let us check the state of our Redux cicle of our application. Here you have a video tutorial to check more about it, just click here (for spanish tutorial) and here (for english tutorial).

Now that we have our store created we will import it to our index.jsx.

index.jsx code example by Gemma Teixidó

We need to import Provider from react-redux and wrap it around the entire app in our index file. The provider connects the global state to the app. Provider takes in an argument called store in which we must pass the created store.

Perfect! We are almost done, let’s extract our reducers and set the actions so we can apply it in our application!

Extract the Reducers and Set up Actions

We need to create a function for each actionType and that name will be the one we defined in our reducer so in our case “INCREMENT”, “DECREMENT” and “RESET”. We will create this file in a folder name actions and called index.

extract reducers code example by Gemma Teixidó

Now that we have exported the functions with our actionType we can use them in our application to dispatch the action and change the state of our data.

Dispatch the actions

Now we just have to call our functions with the dispatch with useDispatch hook and then it will go to the reducer and our switch (depending of the actionType) will change our state.

app.jsx with dispatch code example by Gemma Teixidó

In this case the dispatch will be called whenever we click on the button “Increase”, “Reset” or “Decrease” and then the dispatch will do the work depending on which function is invoked.

And that will be it!!!!!! Congratulations, you just learned how to implement the pattern of Redux!!! 🎉🎉🎉

I hope you enjoyed this tutorial and hopefully you learned a lot from it. Now it’s your turn to get it into practice! Don’t wait any longer and get into the code!