An Overview of Redux in React for Newbies

Payoda Technology Inc
4 min readDec 16, 2024

--

One of the common challenges that emerge when you are working with React is the state management which may become complex as your application evolves. This involves controlling data flow within the application and controlling change in components across the large-scale application.

Redux is one of the widely used state management libraries that assist with simplifying this process. To give you some initial understanding of it and guide you through implementing it, let’s take a closer look at what Redux is and how it integrates with React in this guide.

(Unsplash)

What is Redux?

Whereas Redux is a predictable state management solution that uses strict unidirectional data flow. Its main advantage is that it offers the keeper of the state of your app which is important when the app becomes large and complex to navigate through. Redux is built around three core

Principles:

Redux is built around three core principles:

  • Single Source of Truth: The entire state of your application is stored in one central object which is known as store. This makes it easier to manage and debug state especially when you have a large scale state in your program.
  • State is Read-Only: The only way to push the change through is to dispatch an action and this is an object that comes in the simple JavaScript format. This helps in establishing certain changes and make them coherent at the same time.
  • Changes are Made with Pure Functions: Redux employs use of pure functions; known as reducers in the context of state management. A pure function is one which has no side effects ie if the same input is given to the function then the same output will be obtained.

Redux is a global state management pattern for javascript applications I will demonstrate how to setup redux in a react application.

How to begin with Redux in a React application is by installing redux package, as well as react-redux.

npm install redux react-redux

Let’s break down the core components of a Redux setup:

1. The Store

This is where the current state of your application resides,” the store is often central to application design and architecture of modern user interfaces. Using the Redux’ createStore function, you create the store. They are called Reducers and one of reducers’ parameters is a reducer.
javascript

const { createStore } = require(‘redux’)
const store = createStore(rootReducer);

The rootReducer is the aggregation of all the reducers of your application. Each reducer operates on a part of the application’s state.

2. Actions

Reducers are simply plain JavaScript functions which specify the transformations which to be done on the state based on the actions. Every action has a type field, and may have a payload — the data integral to the change of state.
javascript

const incrementAction = {
type: ‘INCREMENT’,
};

3. Reducers

Reducers describe how the state of an application evolves due to an action. They are side-effect free with the payload of the current state, an action, and the return of a new state.
javascript

const initialState = { count: [NoOfTimes title was mentioned = 0 ]

The counter reducer function takes in state which defaults to a value of initialState and action as its parameters.

switch (action. type) {
case ‘INCREMENT’:
return { . .. state, count: state. count + 1 };

Implements some formulas to read the subcomponent numbers and generates a formula to re-write it in code so that I can compare with the regex output.
case ‘DECREMENT’:

return { . .. state, count: state.count — 1;
default:
return state;
}
}

4. Dispatching Actions

To update the state, an action is sent through the help of the dispatch method from the store.
javascript

store. dispatch({ type: ‘INCREMENT’ });

Every time an action is dispatched, Redux invokes the reducer function with the previous state along with the action. Reducer takes the action and returns a new state and this in turn changes the store.

Integrating Redux with React

To connect Redux with a React component, you use the react-redux library, which provides two key functions: Offer and join.

Provider: The Provider component has to be used to surround the application, to allow all components to access the Redux store.
javascript
the Provider component from the redux library is imported θ

function App() {
return (
<Provider store={store}>
<MyComponent />
</Provider>
);
}

Connect: This function is mostly used to ‘connect’ a React component to Redux store. It translates state and dispatch actions to the component’s properties.
javascript
Copy code
const connect = require(‘react-redux’);

import React from ‘react’ const MyComponent = ({ count, increment }) =>
return (
<div>
<p>{count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

const mapStateToProps = (state) => ({
count: state. count,
});

const mapDispatchToProps = (dispatch) => (
increment: The sider means => dispatch({ type: ‘INCREMENT’ }),
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

Conclusion

Redux makes the state of a React application consistent and predictable. It may look confusing initially but once you try to consider it in terms of actions, reducers, and stores you’ll be able to realize how it handles state well.

Redux is not necessary in every project, especially small ones, but it makes sense in complex applications with complex state management that can scale well. Ultimately, Redux will be a very effective weapon in your React toolkit once you can follow its workings.

Author: Harshavarthan S

For more blogs, check out www.payoda.com/

--

--

Payoda Technology Inc
Payoda Technology Inc

Written by Payoda Technology Inc

Your Digital Transformation partner. We are here to share knowledge on varied technologies, updates; and to stay in touch with the tech-space.

No responses yet