Getting Started with React and Redux: A Beginner’s Guide

🚀 Understanding Redux in React: A Beginner-Friendly Guide
State management is a crucial part of building scalable React applications. As your app grows, passing props between multiple components can get messy and hard to maintain. That’s where Redux comes in.

In this blog post, we’ll explore what Redux is, how it works, and how React components interact with it.

🔍 What is Redux?
Redux is a state management library for JavaScript applications. It provides a centralized way to manage application state, making it easier to understand, maintain, and test.

With Redux, multiple components can access and update the same state value without needing to pass props manually across the component tree.

🧱 Key Building Blocks of Redux
Redux has several core concepts that work together to manage the state of your application.

1. React Component
   A user interacts with a React component—for example, by clicking a button or typing into an input. When the component needs to trigger a state change, it communicates with Redux.

2. Action Creator
   React components don’t directly modify the Redux store. Instead, they call an action creator.

An action creator is a function that returns an action object.

Ex: // Action Creator
function incrementCounter() {
return {
type: 'INCREMENT',
payload: 1
};
}

1. Action An action is a plain JavaScript object that describes what happened in the application. Every action must have a type property and may optionally include a payload.

// Example of an action
{
type: 'INCREMENT',
payload: 1
}

1. Dispatch Dispatch is a function. The component calls the dispatch function and provides the action object as an argument. The dispatch function is used to send an action to the store.

dispatch({
type: 'INCREMENT',
payload: 1
});

1. Store When an action is dispatched to the store, the store doesn’t know how to update its state directly based on the action. It delegates this responsibility to the reducer. So, the store passes the action and the current state to the reducer function.

const store = createStore(counterReducer);

1. Reducer A reducer is a function that takes the current state and an action as arguments. Based on the type of action, the reducer updates the state. The reducer does not directly update the store state—it returns a new state to the Redux store.

const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return {... state + +action.payload}
default:
return state;
}
};

1. State Update Flow Once the reducer returns the new state, the Redux store updates its internal state and notifies all connected React components.

These components can then re-render using the updated state.

🔗 Connecting Redux with React
To use Redux effectively with React, we often use the following tools:

✅ useSelector (Functional Components)
This hook allows you to access state from the Redux store inside a functional component.

const count = useSelector((state) => state.counter);

✅ mapStateToProps (Class Components)

This is a function that takes the Redux store's state as an argument. It accesses the desired data from that state and provides it to the React component as props. It "maps" the data from the Redux store to the component’s props.

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

✅ mapDispatchToProps
This is a function that takes the dispatch function as an argument. This function uses the dispatch to send an action object. It allows React components to dispatch actions to the Redux store. It "maps" the action creators to the component’s props.

const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch({ type: 'INCREMENT', payload: 1 })
});

🎯 Conclusion
Redux can feel overwhelming at first, but once you understand the flow—from component interaction to reducer and back—it becomes a powerful tool for managing state in large applications.

By separating what happened (actions) from how the state changes (reducers), Redux brings clarity and structure to your app's logic.

If you're building a complex React app and find prop-drilling getting out of hand, Redux might be the solution you need.