React-Redux is a popular state management library that helps manage the application state in React applications. It is an essential tool in the React ecosystem, allowing you to efficiently handle complex state logic and data flow within large applications. React-Redux connects the Redux store to React components, enabling seamless communication between the two.
Before diving into React-Redux, it’s important to understand what Redux is and why it's used.
What is Redux?
Redux is a predictable state container for JavaScript applications. It helps manage an application's state in a centralized way, making it easier to maintain and debug, especially as the app grows in complexity.
It is based on three fundamental principles:
- Single Source of Truth: The entire application state is stored in a single JavaScript object called the store.
- State is Read-Only: The only way to change the state is by dispatching an action that describes the change.
- Changes are Made with Pure Functions: Changes to the state are made using reducers, which are pure functions that take the previous state and an action, and return the new state.
Why Use React-Redux?
React-Redux serves as the official library for connecting Redux with React. Here are some reasons why developers choose to use React-Redux:
- Simplifies State Management: React-Redux simplifies state management by providing a structured approach to handle state changes. It allows you to manage the entire state in one place, making it easier to track changes across your application.
- Predictable State Flow: Redux makes state changes predictable, which is crucial for debugging and maintaining large-scale applications. The state can only change through actions, and those actions are processed by reducers, making the flow of data transparent.
- Decouples Components from State Management: With React-Redux, you can decouple the UI components from the state logic. This means components focus on rendering the UI while Redux manages the application state.
- Easier Debugging: React-Redux enables tools like Redux DevTools that allow you to inspect, log, and replay state changes, making debugging easier.
- Performance Optimizations: React-Redux uses shallow equality checks to optimize re-renders. It prevents unnecessary re-renders by ensuring that components only update when the relevant state changes.
Core Concepts of React-Redux
To effectively use React-Redux, you need to understand some key concepts:
1. Store
The store is a centralized object that holds the application state. It is the only place where the state can be modified.
2. Actions
An action is a plain JavaScript object that describes a change in the application state. It must have a type property and can optionally include a payload.
const incrementAction = { type: 'INCREMENT', payload: 1 };3. Reducers
A reducer is a pure function that specifies how the application’s state changes in response to an action. It takes the current state and an action as arguments and returns a new state.
const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } };4. Dispatch
The dispatch function is used to send an action to the Redux store, triggering the reducer to process the state change.
store.dispatch(incrementAction);
5. Selectors
A selector is a function that retrieves specific pieces of state from the Redux store. It helps to abstract the state retrieval process, making it easier to access state in a more manageable way.
const selectCount = (state) => state.count;
6. Provider
The Provider component makes the Redux store available to all the components in the application. It should wrap the entire application so that any component can access the store.
import { Provider } from 'react-redux'; <Provider store={store}> <App /> </Provider>;7. connect()
connect() is a function provided by React-Redux to connect React components to the Redux store. It allows the components to access the state and dispatch actions.
import { connect } from 'react-redux'; const Counter = ({ count, increment }) => ( <div> <h1>{count}</h1> <button onClick={increment}>Increment</button> </div> ); const mapStateToProps = (state) => ({ count: state.count }); const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT', payload: 1 }) }); export default connect(mapStateToProps, mapDispatchToProps)(Counter);How React-Redux Works
React-Redux connects React components to the Redux store, ensuring smooth state management across your app. Here’s a simplified breakdown of how it works:
1. Setting Up the Store
The Redux store holds the entire state of your application. It’s created using createStore() and initialized with a reducer to define how the state changes.
const store = createStore(counterReducer);
2. Dispatching Actions
Actions are plain objects that describe changes in state. These actions are dispatched to inform Redux of a state change.
store.dispatch({ type: 'INCREMENT', payload: 1 });3. Reducers Update the State
A reducer is a function that updates the state based on the action type. It takes the current state and action, then returns a new state.
const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.payload; default: return state; } };4. Connecting Components with connect()
React-Redux’s connect() function connects React components to the Redux store, allowing components to access state and dispatch actions.
const mapStateToProps = (state) => ({ count: state }); const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT', payload: 1 }) });5. Using Provider to Make Store Accessible
The Provider component makes the store available to all components in the app.
<Provider store={store}><App /></Provider>6. Re-Renders and Reactivity
React-Redux ensures that only components dependent on updated state will re-render, optimizing performance.
Steps To Implement React-Redux
Step 1: Setting Up the Project
First, create a new React app using create-react-app:
npx create-react-app react-redux-countercd react-redux-counter
Next, install redux and react-redux:
npm install redux react-redux
Folder Structure
Folder StructureDependencies
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-redux": "^9.1.2",
"react-scripts": "5.0.1",
"redux": "^5.0.1",
"web-vitals": "^2.1.4"
}Step 2: Define Action Types
You need to define action types, which represent the actions that will update the state.
JavaScript // src/redux/actionTypes.js export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';
Step 3: Action Creators
Action creators are functions that return action objects.
JavaScript // src/redux/actions.js import { INCREMENT, DECREMENT } from "./actionTypes"; export const increment = () => ({ type: INCREMENT, }); export const decrement = () => ({ type: DECREMENT, }); Step 4: Reducers
Reducers specify how the application's state changes in response to actions. The reducer function receives the current state and action, and returns the updated state.
JavaScript // src/redux/reducer.js import { INCREMENT, DECREMENT } from "./actionTypes"; const initialState = { count: 0, }; const counterReducer = (state = initialState, action) => { switch (action.type) { case INCREMENT: return { ...state, count: state.count + 1 }; case DECREMENT: return { ...state, count: state.count - 1 }; default: return state; } }; export default counterReducer; Step 5: Create the Redux Store
Now, create the Redux store using the createStore function from Redux.
JavaScript // src/redux/store.js import { createStore } from 'redux'; import counterReducer from './reducer'; const store = createStore(counterReducer); export default store; Step 5: Wrap the App with the Redux Provider
Next, wrap your entire application with the Redux Provider to make the store accessible to all components in the app.
CSS /* src/index.css */ body { font-family: Arial, sans-serif; text-align: center; } button { margin: 5px; padding: 10px; font-size: 16px; } import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './redux/store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); import React from "react"; import Counter from "./components/Counter"; function App() { return ( <div className="App"> <h1>React-Redux Counter App</h1> <Counter /> </div> ); } export default App; import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { increment, decrement } from "../redux/actions"; const Counter = () => { const count = useSelector((state) => state.count); const dispatch = useDispatch(); return ( <div> <p>Count: {count}</p> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); }; export default Counter;
To start the application run the following command.
npm start
Output
Introduction to React-ReduxConclusion
In this article, we explored React-Redux, which simplifies state management in React by centralizing the app's state in a Redux store. Using Provider, connect(), and React-Redux hooks like useSelector and useDispatch, React components can easily access and update the global state. React-Redux helps improve state predictability, performance, and maintainability, especially in large-scale applications.
Similar Reads
Redux Store in React Native In this article, we are going to learn about Redux Store. It is the object which holds the state of the application. The store is one of the building blocks of Redux. Redux is a state managing library used in JavaScript apps. It is used to manage the data and the state of the application. Â Uses of
5 min read
Introduction to Redux (Action, Reducers and Store) Redux is a state managing library used in JavaScript apps. It simply manages the state of your application or in other words, it is used to manage the data of the application. It is used with a library like React.Uses: It makes easier to manage state and data. As the complexity of our application in
4 min read
How to test React-Redux applications? Testing React-Redux applications is crucial to ensure their functionality, reliability, and maintainability. As we know, the React-Redux application involves complex interactions between components and Redux state management, testing helps us to identify and prevent bugs, regressions, and performanc
10 min read
What are combinedReducers in React Redux? In React Redux 'combinedReducers' is like putting together smaller pieces of a puzzle (reducers) to form one big puzzle (the root reducer). It helps manage your application state more efficiently by organizing and combining these smaller pieces, making your code cleaner and easier to maintain. Key F
3 min read
React Hooks vs Redux React Hooks and Redux are tools in React that help manage state, but they work differently. React Hooks, are useState and useEffect through which allow each component to handle there own data. Redux, on the other hand, is a tool that stores all data in one place, making it easier to share data acros
3 min read