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
Also interesting
Expand your knowledge with the 4BIS Blog...
Automate, Web development, Software Modernisation, Business software, Knowledge Base
Discover how automation of your software and processes can improve your business. Learn about the benefits of automation and how it can make your operations more efficient. Contact us for customized automation solutions.
Read moreAutomate, Web development, Software Modernisation, Knowledge Base, WordPress, WooCommerce
Learn how to change backend behavior on a WordPress website for mobile devices with 4BIS Innovatives' expert guide. Discover tips on optimizing your WordPress site's performance by adjusting backend settings specifically for mobile users. Explore how...
Read moreBusiness software, Web development, Software Modernisation, B2B
Discover why HR software is essential for your company. Learn about its benefits and how custom solutions can transform your HR management. Contact us for tailored HR software solutions.
Read more 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!