Redux with Action Creators 2025
Redux with Action Creators 2025
In Redux, Action Creators are functions that return action objects. They help keep your code clean and make it easy to manage actions, especially when they need to accept dynamic payloads.
1. Create Action Types
// actionTypes.js
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
2. Create Action Creators
// actions.js
import { INCREMENT, DECREMENT } from './actionTypes';
export const increment = () => {
return {
type: INCREMENT,
};
};
export const decrement = () => {
return {
type: DECREMENT,
};
};
3. Use Action Creators in Component
// CounterComponent.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = () => {
const dispatch = useDispatch();
const counter = useSelector(state => state.counter);
return (
Count: {counter}
);
};
export default Counter;
4. Why Use Action Creators?
- Cleaner and more maintainable code
- Easier to test and reuse
- Helps when using middleware like Redux Thunk for async actions
✅ Pro Tip: Keep actions in a separate folder and follow naming conventions for better scalability.