**: Uses a centralized store to manage state globally.
<ul>
<li>Setup: Requires external dependencies (<code>redux</code>, <code>react-redux</code>).</li>
<li>Best For: Large applications with complex state management needs.</li>
</ul>
<h3>Example of Redux</h3>
<h4>1. Install Dependencies</h4>
<pre><code class="language-sh">npm install @reduxjs/toolkit react-redux
</code></pre>
<h4>2. Create Redux Slice (<code>counterSlice.js</code>)</h4>
<pre><code class="language-javascript">import { createSlice } from &quot;@reduxjs/toolkit&quot;;

const counterSlice = createSlice({
 name: &quot;counter&quot;,
 initialState: { count: 0 },
 reducers: {
 increment: (state) =&gt; {
 state.count += 1;
 },
 decrement: (state) =&gt; {
 state.count -= 1;
 },
 },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
</code></pre>
<h4>3. Configure Redux Store (<code>store.js</code>)</h4>
<pre><code class="language-javascript">import { configureStore } from &quot;@reduxjs/toolkit&quot;;
import counterReducer from &quot;./counterSlice&quot;;

const store = configureStore({
 reducer: {
 counter: counterReducer,
 },
});

export default store;
</code></pre>
<h4>4. Provide Redux Store to App (<code>index.js</code>)</h4>
<pre><code class="language-javascript">import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import { Provider } from &quot;react-redux&quot;;
import store from &quot;./store&quot;;
import App from &quot;./App&quot;;

ReactDOM.render(
 &lt;Provider store={store}&gt;
 &lt;App /&gt;
 &lt;/Provider&gt;,
 document.getElementById(&quot;root&quot;)
);
</code></pre>
<h4>5. Use Redux in Components (<code>Counter.js</code>)</h4>
<pre><code class="language-javascript">import React from &quot;react&quot;;
import { useDispatch, useSelector } from &quot;react-redux&quot;;
import { increment, decrement } from &quot;./counterSlice&quot;;

const Counter = () =&gt; {
 const count = useSelector((state) =&gt; state.counter.count);
 const dispatch = useDispatch();

 return (
 &lt;div&gt;
 &lt;p&gt;Count: {count}&lt;/p&gt;
 &lt;button onClick={() =&gt; dispatch(increment())}&gt;+&lt;/button&gt;
 &lt;button onClick={() =&gt; dispatch(decrement())}&gt;-&lt;/button&gt;
 &lt;/div&gt;
 );
};

export default Counter;
</code></pre>
Key Takeaway: Redux is more powerful and suited for managing application-wide state, making it ideal for large-scale applications.
<hr>
<h2>📌 Differences</h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th><code>useReducer</code> (React Hook)</th>
<th>Redux (Global State)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scope</td>
<td>Local component state</td>
<td>Global application state</td>
</tr>
<tr>
<td>Best For</td>
<td>Small-scale state management</td>
<td>Large-scale, complex apps</td>
</tr>
<tr>
<td>Setup</td>
<td>No external dependencies</td>
<td>Requires <code>redux</code> &amp; <code>react-redux</code></td>
</tr>
<tr>
<td>Performance</td>
<td>Lightweight</td>
<td>Can be optimized with middleware like <code>RTK Query</code></td>
</tr>
<tr>
<td>State Sharing</td>
<td>Limited to component tree</td>
<td>Shared across multiple components</td>
</tr>
</tbody>
</table>
<hr>
<h2>When to Use What?</h2>
✔ Use <code>useReducer</code> when:
<ul>
<li>You need complex state logic inside a single component.</li>
<li>The state is not required across multiple components.</li>
</ul>
✔ Use Redux when:
<ul>
<li>You need a global state that multiple components depend on.</li>
<li>You want a predictable, centralized state management system.</li>
</ul>

Get 1% better daily. Development resource sharing made easy. Post, comment, or upvote to show your contribution and support other developers! 🙌

⚠️ Please do not post any promotional resources.

Dev Squad

The post explains the difference between using the `useReducer` hook and Redux for state management in React applications. `useReducer` is suitable for local component state with complex logic, avoiding the need for external dependencies. Redux, on the other hand, uses a centralized store for managing global state, ideal for larger applications with complex state needs. Key setup steps for implementing Redux, including installing dependencies, creating a slice, configuring the store, provisioning, and using Redux in components, are also provided.

Difference between Reducer vs Redux

While Redux leans on Reducers to manage global state, wouldn’t comparing something like useContext make more sense, since you can implement reducers within useContext to rival what Redux does?