Can you provide a detailed example of using Redux with React for state management

Step 1: Set Up Redux

1. Install Redux and React-Redux:

bash
   npm install redux react-redux
   

2. Create a Reducer:

javascript
   // counterReducer.js
   const initialState = { counter: 0 };

   const reducer = (state = initialState, action) => {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, counter: state.counter + 1 };
       case 'DECREMENT':
         return { ...state, counter: state.counter - 1 };
       default:
         return state;
     }
   };

   export default reducer;
   

Step 2: Create the Redux Store

1. Import the `createStore` Function:

javascript
   import { createStore } from 'redux';
   

2. Create the Store:

javascript
   import reducer from './counterReducer';

   const store = createStore(reducer);

   export default store;
   

Step 3: Connect Redux with React

1. Wrap the App with the `Provider` Component:

javascript
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import store from './store';
   import App from './App';

   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

Step 4: Use Redux in a React Component

1. Create an Action:

javascript
   // actions.js
   export const increment = () => ({ type: 'INCREMENT' });
   export const decrement = () => ({ type: 'DECREMENT' });
   

2. Use the Action in a Component:

javascript
   // Counter.js
   import React, { useState, useDispatch } from 'react';
   import { increment, decrement } from './actions';

   const Counter = () => {
     const dispatch = useDispatch();
     const [count, setCount] = useState(0);

     const handleIncrement = () => {
       dispatch(increment());
     };

     const handleDecrement = () => {
       dispatch(decrement());
     };

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={handleIncrement}>Increment</button>
         <button onClick={handleDecrement}>Decrement</button>
       </div>
     );
   };

   export default Counter;
   

Step 5: Connect the Component to Redux

1. Use the `useSelector` Hook to Access the State:

javascript
   import React from 'react';
   import { useSelector } from 'react-redux';
   import Counter from './Counter';

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

     return (
       <div>
         <Counter />
         <p>Count: {count}</p>
       </div>
     );
   };

   export default App;
   

Step 6: Run the Application

1. Start the Application:

bash
   npm start
   

This example demonstrates how to set up Redux with React for state management. It includes creating a reducer, setting up the Redux store, connecting Redux with React, and using Redux in a React component.