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...

No secure server connection: These are the most common connection errors

Knowledge Base

Error messages when looking up a website are common. Although they are often easy to solve, they still often go wrong. This could be due to a small error, but this can immediately prevent a connection error. Resolving these errors requires some steps....

Read more

Domain Name Sales Software: This is How This Comes in Handy

Digital Marketing, Knowledge Base

Domain name sales software is indispensable if you want to sell domains. Selling domains has become increasingly popular, with private domains being bought up and sold for a high profit. The easiest way to do this is with domain name sales software.

Read more

What is a widget?

Software Modernisation, Knowledge Base, React, Business software

Many people come across widgets, but they are not always clear. So many people wonder, what is a widget? We explain what exactly a widget is in this blog.

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