React Redux Simply 'Counter example'
Published: 2023-09-14 13:34:33




This example will demonstrate how to set up Redux for state management in a React application to create a counter Simply  .

## Requirements
: You must have knowledge of react js

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqw2m7ffk5q96ztpklw7.gif)
---
---
## step1
make sure you have Redux installed in your project. You can install it using npm or yarn:

```bash
npm install redux react-redux
```

Here's a step-by-step example:

1. **Create Redux Actions and Reducer**

> I know very well that everyone who explained this example before was dividing it into three files
Action.js &  Reducer.js & Store.js
> But here I will put them in one file just for simplicity and so that you do not get dizzy
its just redux not NASA 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0xczjhuk32i5zxhzqvn.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p537uedse1nrkoe2c3eb.gif)



   Create a file for your Redux actions and reducers. Let's call it `counter.js`. Define your actions and a reducer function.

   ```javascript
   // counter.js
   const INCREMENT = 'INCREMENT';
   const DECREMENT = 'DECREMENT';

   // Action creators
   export const increment = () => ({ type: INCREMENT });
   export const decrement = () => ({ type: DECREMENT });

   // Reducer
   const initialState = { count: 0 };

   export default function counterReducer(state = initialState, action) {
     switch (action.type) {
       case INCREMENT:
         return { count: state.count + 1 };
       case DECREMENT:
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   ```

2. **Configure Redux Store**

   In your main application file, configure the Redux store and connect it to your React app using the `Provider` component.

   ```javascript
   // index.js or App.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { createStore } from 'redux';
   import { Provider } from 'react-redux';
   import counterReducer from './counter';
   import App from './App';

   const store = createStore(counterReducer);

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

3. **Create the React Component**

   Now, create a React component that will display the counter and handle the actions.

   ```javascript
   // App.js
   import React from 'react';
   import { useSelector, useDispatch } from 'react-redux';
   import { increment, decrement } from './counter';

   function App() {
     const count = useSelector((state) => state.count);
     const dispatch = useDispatch();

     return (
       <div>
         <h1>Redux Counter</h1>
         <p>Count: {count}</p>
         <button onClick={() => dispatch(increment())}>Increment</button>
         <button onClick={() => dispatch(decrement())}>Decrement</button>
       </div>
     );
   }

   export default App;
   ```

4. **Run the Application**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5us972dv9rjrwfq80el.png)


   Start your React application using `npm start` or your preferred method.

This example demonstrates a simple Redux counter in a React application. When you click the "Increment" or "Decrement" buttons, the Redux store will manage the state, and the UI will update accordingly.