Redux the Intro!

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