Managing state in large-scale React applications can quickly become chaotic, especially when multiple components need access to the same data and when that data changes frequently as a result of user interactions, API responses, or side effects. While React’s built-in `useState` and `useContext` hooks are excellent for local or simple global state, they often fall short when your application grows beyond a few screens. This is where Redux steps in as a predictable state container designed to make state changes transparent, debuggable, and maintainable. In this comprehensive guide, we will walk through every step of integrating Redux with React, from setting up the environment to advanced patterns like handling asynchronous actions with Thunk. By the end, you will have a solid understanding of how to structure your application, write actions, reducers, and connect components efficiently using both the classic `connect()` API and modern Redux hooks. Whether you are a beginner looking to understand the fundamentals or a seasoned developer wanting to brush up on best practices, this tutorial will provide you with actionable, well-explained content.<\/p>\n
Before diving into code, it is crucial to grasp the core philosophy behind Redux. At its heart, Redux is built on three key principles: a single source of truth (the store), state is read-only (only changeable through dispatched actions), and changes are made using pure functions (reducers). In a typical React application without Redux, state can be scattered across components, making it difficult to track how changes propagate. Redux centralizes all state in one object called the store. To update this state, you must dispatch an action\u2014a plain JavaScript object describing what happened. The reducer then takes the current state and the action, and returns a new state object. This unidirectional data flow ensures that every state change is predictable and traceable. When combined with React, Redux becomes a powerful tool that lets any component subscribe to slices of state without having to pass props down through many layers. This approach eliminates “prop drilling” and simplifies debugging because you can log every action and inspect the state at each step. Ready to build your first Redux-powered React app? Let’s begin with the setup.<\/p>\n
<\/p>\n
The first practical step is to create a new React application using Create React App (CRA) and then install the necessary Redux libraries. Open your terminal and run the following commands:<\/p>\n
While you can use the core `redux` and `react-redux` packages manually, I strongly recommend using Redux Toolkit (RTK) for new projects. Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It includes utilities like `createSlice`, `configureStore`, and built-in Thunk support, which drastically reduce boilerplate code and prevent common mistakes like mutating state. For the purpose of this tutorial, we will use Redux Toolkit, but we will also explain the traditional approach so you understand the underlying mechanisms. After installation, make sure your `package.json` lists `react-redux` version 8.x and `@reduxjs\/toolkit` version 1.9.x or later. Clean up the default CRA files by removing everything in `src` except `index.js` and `App.js`. We’ll build a simple todo application to illustrate the concepts.<\/p>\n In the traditional Redux architecture, you define constants for action types and then create action creators\u2014functions that return action objects. For example, in a todo app, you might have `ADD_TODO`, `TOGGLE_TODO`, and `DELETE_TODO`. Create a file `src\/redux\/actions.js`:<\/p>\n However, with Redux Toolkit, we can simplify this dramatically by using `createSlice`. Create a file `src\/redux\/todoSlice.js`:<\/p>\n Notice how `createSlice` automatically generates action creators and action types. Inside the reducers, you can write “mutating” code because Immer (bundled with RTK) converts it into immutable updates under the hood. This is significantly less verbose and much safer than writing switch-case statements manually. The resulting `todoSlice.reducer` is a standard reducer function that you can combine with others later. For this guide, we will continue with the Redux Toolkit approach because it is the recommended modern practice.<\/p>\n The next step is to create the Redux store that holds the entire state tree of your application. With Redux Toolkit, you use `configureStore` which automatically sets up the Redux DevTools extension and middleware (like Thunk). Create a file `src\/redux\/store.js`:<\/p>\n Here, the `reducer` field is an object that maps slice names to their respective reducer functions. This is the same concept as combining reducers with `combineReducers` from the classic Redux. `configureStore` automatically calls `combineReducers` internally. If you had multiple slices (e.g., a `userSlice`, `authSlice`), you would add them here. The store is now ready. To make it accessible to your React component tree, you need to wrap your application with a `Provider` component from `react-redux`. In your `src\/index.js`, do the following:<\/p>\n The `Provider` component uses React’s context to pass the store down the component tree, so any component can access the Redux state and dispatch actions. This step is essential and must be done once at the top level.<\/p>\n Before hooks became the norm, the primary way to connect React components to the Redux store was through the `connect` higher-order component (HOC). It takes two functions: `mapStateToProps` and `mapDispatchToProps`. While we now have hooks, you may still encounter this pattern in older codebases, so understanding it is beneficial. Create a `TodosList.js` component:<\/p>\n `mapStateToProps` selects the part of the state you need (in this case, `state.todos.todos` because the slice is named `todos` and the state inside the slice has a `todos` array). `mapDispatchToProps` can be an object\u2014when you pass action creators, `connect` automatically calls `dispatch` on them. This component now receives `todos`, `toggleTodo`, and `deleteTodo` as props. Every time the store’s state changes, `mapStateToProps` re-runs and the component re-renders if the returned object is different. This pattern is explicit but can become verbose, especially when you have many slices.<\/p>\n With the introduction of hooks in React 16.8 and the corresponding `react-redux` hooks API, connecting components has become much more concise. Instead of using `connect`, you can use `useSelector` to extract data from the store and `useDispatch` to get a reference to the dispatch function. Let’s rewrite the `TodosList` component using hooks:<\/p>\n The `useSelector` hook accepts a selector function that returns a slice of state. React-Redux ensures that the component only re-renders when the selected state value changes (using strict reference equality by default). `useDispatch` returns the store’s dispatch function, which you can call directly with an action creator. This approach eliminates the need for `connect`, reduces wrapping, and makes your components simpler to read and test. It is the recommended way to write new Redux code. For more complex selectors, you can extract them into separate files and use `createSelector` from Reselect (which is re-exported by Redux Toolkit) for memoization.<\/p>\n Now let’s build an input component that dispatches the `addTodo` action when a user submits a form. Create `AddTodo.js`:<\/p>\n We use local component state (`useState`) for the text input because that is ephemeral UI state that doesn’t need to be in Redux. Only when the user submits the form do we dispatch the `addTodo` action. The reducer handles updating the todos array. This separation of concerns keeps your Redux state lean and focused on shared data. Notice that in the slice we defined `addTodo` to expect the text as the payload directly, so we pass `addTodo(text)`. After dispatching, we clear the input. This component can be used anywhere in the app, and it will correctly add a todo to the global store.<\/p>\n Real-world applications often need to fetch data from APIs, update local state after a server response, or handle other side effects. Redux Toolkit includes `createAsyncThunk` to simplify async workflows. Let’s simulate fetching initial todos from a fake API. First, create a new slice for async todos or extend your existing `todoSlice`. For demonstration, create `src\/redux\/todoAsyncSlice.js`:<\/p>\n We use `createAsyncThunk` which generates three action types: pending, fulfilled, and rejected. Inside `extraReducers`, we handle each case. When `fetchTodos` is dispatched, it automatically dispatches the pending action, then after a successful API call, the fulfilled action. We also include a loading status flag and error handling. Register this slice in the store: `reducer: { asyncTodos: todoAsyncReducer }`. Then in your component, you can dispatch `fetchTodos` within a `useEffect`:<\/p>\n This pattern is scalable for all async operations: fetching, posting, updating. Redux Thunk middleware is already included in `configureStore`, so no additional setup is needed. This step completes our core integration of Redux with React, covering both synchronous and asynchronous workflows.<\/p>\n Do not dump all actions and reducers into a single file. Instead, follow the “ducks” pattern or “feature folder” approach: group files by feature (e.g., `features\/todos\/todoSlice.js`, `features\/users\/userSlice.js`). Keep your store configuration separate. This makes it easier to find related code and scales well in large teams. Also, avoid putting UI logic inside Redux; keep actions as pure descriptions of events.<\/p>\n Install the Redux DevTools browser extension. With `configureStore`, it is enabled automatically in development. You can inspect every action dispatched, view the state diff, and even time-travel through actions. This is invaluable for debugging complex state changes. Make sure you do not enable dev tools in production (RTK handles this conditionally).<\/p>\n When your state tree gets deep, using `useSelector` with an inline selector may cause extra re-renders if the selector returns a new array or object every time (e.g., filtering todos). Use `createSelector` from Redux Toolkit to memoize computed values. For example:<\/p>\n Then in your component: `const completedTodos = useSelector(selectCompletedTodos);` This only recalculates when `todos` changes, preventing wasteful re-renders.<\/p>\n Not all state needs to be global. Local form inputs, toggle states, dropdown open\/close, and similar UI-only state should stay in component-local `useState` or `useReducer`. Redux is best for shared state that multiple components need to read or update. Overusing Redux can lead to unnecessary complexity and performance issues.<\/p>\n React Context is simpler and works well for low-frequency updates (like theme, locale, authentication). However, Context can cause performance issues when many components consume the context and the value changes frequently because all consumers re-render. Redux (with React-Redux) is optimized to only re-render components that actually depend on the changed data via subscriptions and memoization. For medium-to-large apps with complex state interactions, Redux is usually the better choice. See the comparison table below.<\/p>\n You can use plain Redux, but Redux Toolkit is now the officially recommended approach. It eliminates boilerplate, prevents common mistakes (like mutating state by accident), and includes Thunk out of the box. Unless you have a legacy project, always use RTK. It reduces code size by about 30% and makes development faster.<\/p>\n For components using `useSelector` and `useDispatch`, you can mock the Redux store using the ` The `connect` HOC is older and still works, but hooks (`useSelector`, `useDispatch`) are simpler, reduce nesting, and are easier to read. They also integrate better with TypeScript. You should prioritize learning the hooks API. However, if you work with an existing codebase heavily using `connect`, understanding the HOC pattern is useful for maintenance.<\/p>\n Yes, for a small app with few state interactions, Redux can be overkill. React Context combined with `useReducer` is often sufficient. However, if you anticipate growth, or if you want the debugging and testing benefits, using Redux from the start can be justified. RTK reduces boilerplate significantly, making it more viable for smaller projects as well.<\/p>\n Integrating Redux with React may seem daunting at first due to the number of concepts\u2014actions, reducers, store, providers, and connection layers. However, as this comprehensive guide has shown, the actual process is straightforward once you understand the flow: dispatching an action, which triggers a reducer, producing a new state, which causes connected components to re-render. By using Redux Toolkit, you reduce boilerplate and adopt best practices like immutable updates and simplified async handling. The modern hooks API makes component coupling clearer and more intuitive. Remember to structure your code logically, leverage DevTools, and keep your selectors memoized for optimal performance. Whether you are building a small personal project or a large enterprise application, mastering Redux will give you the confidence to manage state predictably. Now, go ahead and try implementing this todo app on your own, then extend it with filtering, persistence, or user authentication. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Master React State Management: A Comprehensive Guide to Using Redux with React Managing state in large-scale React applications can quickly become chaotic, especially when multiple components need access to the same data and when that data changes frequently as a result of user interactions, API responses, or side effects. While React’s built-in `useState` and `useContext` … <\/p>\n","protected":false},"author":2716,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[],"tags":[],"class_list":["post-1016","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/1016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/users\/2716"}],"replies":[{"embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1016"}],"version-history":[{"count":0,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/posts\/1016\/revisions"}],"wp:attachment":[{"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/categories?post=1016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumberlaba.com\/index.php\/wp-json\/wp\/v2\/tags?post=1016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}npx create-react-app redux-todo-app<\/code>cd redux-todo-app<\/code>npm install redux react-redux @reduxjs\/toolkit<\/code><\/p>\nStep 2: Defining Action Types and Action Creators (Traditional Approach) or Using Slices (Redux Toolkit)<\/h2>\n
export const ADD_TODO = 'ADD_TODO';\nexport const TOGGLE_TODO = 'TOGGLE_TODO';\nexport const DELETE_TODO = 'DELETE_TODO';\n\nexport const addTodo = (text) => ({\n type: ADD_TODO,\n payload: { id: Date.now(), text, completed: false }\n});\n\nexport const toggleTodo = (id) => ({\n type: TOGGLE_TODO,\n payload: { id }\n});\n\nexport const deleteTodo = (id) => ({\n type: DELETE_TODO,\n payload: { id }\n});<\/code><\/pre>\nimport { createSlice } from '@reduxjs\/toolkit';\n\nconst initialState = {\n todos: []\n};\n\nconst todoSlice = createSlice({\n name: 'todos',\n initialState,\n reducers: {\n addTodo: (state, action) => {\n state.todos.push({\n id: Date.now(),\n text: action.payload,\n completed: false\n });\n },\n toggleTodo: (state, action) => {\n const todo = state.todos.find(t => t.id === action.payload);\n if (todo) todo.completed = !todo.completed;\n },\n deleteTodo: (state, action) => {\n state.todos = state.todos.filter(t => t.id !== action.payload);\n }\n }\n});\n\nexport const { addTodo, toggleTodo, deleteTodo } = todoSlice.actions;\nexport default todoSlice.reducer;<\/code><\/pre>\nStep 3: Creating the Redux Store and Combining Reducers<\/h2>\n
import { configureStore } from '@reduxjs\/toolkit';\nimport todoReducer from '.\/todoSlice';\n\nconst store = configureStore({\n reducer: {\n todos: todoReducer\n }\n});\n\nexport default store;<\/code><\/pre>\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { Provider } from 'react-redux';\nimport store from '.\/redux\/store';\nimport App from '.\/App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n <Provider store={store}>\n <App \/>\n <\/Provider>\n);<\/code><\/pre>\nStep 4: Connecting Components Using Classic `connect()` API (mapStateToProps and mapDispatchToProps)<\/h2>\n
import React from 'react';\nimport { connect } from 'react-redux';\nimport { toggleTodo, deleteTodo } from '..\/redux\/todoSlice';\n\nconst TodosList = ({ todos, toggleTodo, deleteTodo }) => {\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <span\n style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}\n onClick={() => toggleTodo(todo.id)}\n >\n {todo.text}\n <\/span>\n <button onClick={() => deleteTodo(todo.id)}>Delete<\/button>\n <\/li>\n ))}\n <\/ul>\n );\n};\n\nconst mapStateToProps = (state) => ({\n todos: state.todos.todos\n});\n\nconst mapDispatchToProps = {\n toggleTodo,\n deleteTodo\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TodosList);<\/code><\/pre>\nStep 5: Using Modern React-Redux Hooks (useSelector and useDispatch)<\/h2>\n
import React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { toggleTodo, deleteTodo } from '..\/redux\/todoSlice';\n\nconst TodosList = () => {\n const todos = useSelector((state) => state.todos.todos);\n const dispatch = useDispatch();\n\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <span\n style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}\n onClick={() => dispatch(toggleTodo(todo.id))}\n >\n {todo.text}\n <\/span>\n <button onClick={() => dispatch(deleteTodo(todo.id))}>Delete<\/button>\n <\/li>\n ))}\n <\/ul>\n );\n};\n\nexport default TodosList;<\/code><\/pre>\nStep 6: Adding Input and Form Handling \u2013 Dispatching Actions to Add Todos<\/h2>\n
import React, { useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { addTodo } from '..\/redux\/todoSlice';\n\nconst AddTodo = () => {\n const [text, setText] = useState('');\n const dispatch = useDispatch();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (text.trim()) {\n dispatch(addTodo(text));\n setText('');\n }\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input\n type=\"text\"\n value={text}\n onChange={(e) => setText(e.target.value)}\n placeholder=\"Enter a todo\"\n \/>\n <button type=\"submit\">Add Todo<\/button>\n <\/form>\n );\n};\n\nexport default AddTodo;<\/code><\/pre>\nStep 7: Handling Asynchronous Actions and Side Effects with Redux Thunk<\/h2>\n
import { createSlice, createAsyncThunk } from '@reduxjs\/toolkit';\nimport axios from 'axios';\n\nexport const fetchTodos = createAsyncThunk('todos\/fetchTodos', async () => {\n const response = await axios.get('https:\/\/jsonplaceholder.typicode.com\/todos?_limit=5');\n return response.data.map(todo => ({\n id: todo.id,\n text: todo.title,\n completed: todo.completed\n }));\n});\n\nconst todoAsyncSlice = createSlice({\n name: 'asyncTodos',\n initialState: {\n items: [],\n status: 'idle', \/\/ 'idle' | 'loading' | 'succeeded' | 'failed'\n error: null\n },\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(fetchTodos.pending, (state) => {\n state.status = 'loading';\n })\n .addCase(fetchTodos.fulfilled, (state, action) => {\n state.status = 'succeeded';\n state.items = action.payload;\n })\n .addCase(fetchTodos.rejected, (state, action) => {\n state.status = 'failed';\n state.error = action.error.message;\n });\n }\n});\n\nexport const selectAllTodos = (state) => state.asyncTodos.items;\nexport const selectTodosStatus = (state) => state.asyncTodos.status;\nexport const selectTodosError = (state) => state.asyncTodos.error;\n\nexport default todoAsyncSlice.reducer;<\/code><\/pre>\nimport React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { fetchTodos, selectAllTodos, selectTodosStatus, selectTodosError } from '..\/redux\/todoAsyncSlice';\n\nconst AsyncTodoList = () => {\n const dispatch = useDispatch();\n const todos = useSelector(selectAllTodos);\n const status = useSelector(selectTodosStatus);\n const error = useSelector(selectTodosError);\n\n useEffect(() => {\n if (status === 'idle') dispatch(fetchTodos());\n }, [status, dispatch]);\n\n if (status === 'loading') return <div>Loading...<\/div>;\n if (status === 'failed') return <div>Error: {error}<\/div>;\n\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>{todo.text} {todo.completed ? '\u2713' : ''}<\/li>\n ))}\n <\/ul>\n );\n};\n\nexport default AsyncTodoList;<\/code><\/pre>\nTips and Best Practices for Using Redux with React<\/h2>\n
1. Structure Your Redux Code Logically<\/h3>\n
2. Leverage Redux DevTools for Debugging<\/h3>\n
3. Prevent Unnecessary Re-Renders by Using Memoized Selectors<\/h3>\n
import { createSelector } from '@reduxjs\/toolkit';\n\nconst selectTodos = state => state.todos.todos;\nexport const selectCompletedTodos = createSelector(\n [selectTodos],\n (todos) => todos.filter(todo => todo.completed)\n);<\/code><\/pre>\n4. Avoid Putting Ephemeral UI State in Redux<\/h3>\n
Common Questions and Answers (FAQ)<\/h2>\n
Q1: Should I use Redux or React Context for global state?<\/h3>\n
Q2: Do I need to use Redux Toolkit, or can I use plain Redux with React?<\/h3>\n
Q3: How do I test Redux-connected components?<\/h3>\n
Q4: What is the difference between `connect` and hooks? Which should I learn?<\/h3>\n
Q5: Is Redux too much boilerplate for a small app?<\/h3>\n
Reference Tables<\/h2>\n
Table 1: Comparison of `connect()` vs Hooks API<\/h3>\n
\n\n
\n \nFeature<\/th>\n `connect()` HOC<\/th>\n `useSelector` & `useDispatch` Hooks<\/th>\n<\/tr>\n<\/thead>\n \n Code Style<\/td>\n Wrapping component<\/td>\n Functions inside component<\/td>\n<\/tr>\n \n Learning Curve<\/td>\n Steeper (mapState, mapDispatch, ownProps)<\/td>\n Lower (just two hooks)<\/td>\n<\/tr>\n \n Performance Optimizations<\/td>\n Manual pure components needed<\/td>\n Automatic shallow equality by default<\/td>\n<\/tr>\n \n Testing<\/td>\n Need to export raw component for shallow testing<\/td>\n Easier to mock store in integration tests<\/td>\n<\/tr>\n \n TypeScript Support<\/td>\n Can be verbose<\/td>\n Well-typed with `TypedUseSelectorHook`<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Table 2: Redux vs React Context for Global State<\/h3>\n
\n\n
\n \nCriteria<\/th>\n Redux (with react-redux)<\/th>\n React Context<\/th>\n<\/tr>\n<\/thead>\n \n Performance with frequent updates<\/td>\n Optimized: re-renders only subscribers<\/td>\n Re-renders all consumers<\/td>\n<\/tr>\n \n Middleware support<\/td>\n Built-in (Thunk, Saga, etc.)<\/td>\n None intrinsic<\/td>\n<\/tr>\n \n DevTools<\/td>\n Time-travel debugging, action logs<\/td>\n No built-in tools<\/td>\n<\/tr>\n \n Boilerplate<\/td>\n Moderate (with RTK low)<\/td>\n Low (useState + Context)<\/td>\n<\/tr>\n \n Best for<\/td>\n Complex, large state; async workflows<\/td>\n Simple global state (theme, user auth)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Conclusion<\/h2>\n