Redux the Intro!

Knowledge Base, Automate, React

Published: 23.02.2021

This week a brief introduction to the 4 basic concepts you need to understand Redux. We are going to briefly explain how state is adjusted in a Redux Store using Reducers and Actions. And we tell what all these concepts do and how they work in a Redux application.


The reason why Redux is so popular is that with large applications state management becomes quite complex and with complex applications it becomes a nightmare. And Redux is very lightweight it is only 2kb. Redux is a library that ensures that maintaining your state is predictable. What is meant by this are the following points, which immediately introduce 3 of the 4 main concepts. These are further explained below. – Your complete application state is stored in 1 place your STORE – Your state is only readable and can only be changed by dispatching ACTIONS – You specify what the end result of your state should be by means of REDUCERS These 3 points seem a bit vague now but hopefully once I start explaining them with some examples it will all become clear.


De Store

In redux the store is the object where we store all our state data, but it also brings the actions and reducers together, we will tell more about this later. In each Redux application there is only 1 store. It is very easy to get data from the store, but to change the state and save it is another story. If we want to update state then we have ACTIONS & REDUCTORS needed. The different tasks of the store are: – Get the state via getState() – Save the state of the entire application – Update state through reducers called by actions


Reducers

Reducers are functions that take the previous state and an action as arguments and return a new state. Reducers are controlled by actions and indicate how the state changes based on the action. Reducers are pure functions meaning that a reducer never mutates its own arguments so it can never modify the state directly but it grabs the state and returns a new object. Furthermore, you should never make API calls in your reducer or route from one page to another. Also, don't call "non-pure" functions like Date.now(); Below is an example of a reducer that increases the state by the value specified in the action when an action with type “INCREMENT” is specified.

const defaultState = { count: 0 } const customReducer = (state = defaultState, action) => { switch(action.type){ case “INCREMENT”: return { …state, count: state.count + action.payload } default return state; } }


Actions

Quite simply, actions are event objects that can be dispatched with the dispatch function. They send data to the store through user interaction. These are then captured by Reducers to perform a state change. An action has a type that specifies what the action should do and an optional payload. An action object looks like this:

{ type: “INCREMENT”, payload: 3 }


Action Creators

Action Creators are functions that return an action object and make things a bit easier to test. The actions returned from an action creator go through all the store's reducers. Therefore actions also have an action type to distinguish them. Then to use an action we can simply call the action creator with the dispatch function.

//Action Creator const increaseCounter = ( incrementValue ) => { return { type: “INCREMENT”, payload: incrementValue } } //Dispatch dispatch(() => increaseCounter(incrementValue))


These are the 4 basic concepts of Redux. In isolation, it is not all that difficult, but combined it can be a complex matter. I hope that I have been able to explain the basic concepts of Redux on the basis of this article. In a next article we will come back to this and we will make a mini application with Redux

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

WordPress and Plugins – A world that opens up for you!

WordPress, Web development, Ecommerce / Webshop, Knowledge Base, WooCommerce

With plugins you can expand the functionality of WordPress or add completely new functions to WordPress. You can make plugins yourself, provided you know PHP, or you can download them.

Read more

Unveiling Tech-Nieuws.nl: Where Innovation Meets Ingenuity

SEO / SEA, Software Modernisation, Web development, PHP, Symfony, Digital Marketing

In the bustling realm of technology, staying updated is not just a necessity but a lifestyle. With an overflow of information bombarding us daily, having a reliable source to curate and present the latest tech news becomes invaluable. Enter Tech-Nieuws.nl,...

Read more

HR software: This is how you automate Human Resource Management

Business software, Software Modernisation, Web development, Automate

HRM, also known as Human Resource Management, is an important part for every company. Especially if you have many employees, an HR department is indispensable. However, it is not necessary to have a huge HR department. Much can be automated using HR...

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top