Creator with Parameters
Let's say we're building a to-do app and want an action to add a new task.
// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
// actions.js
import { ADD_TODO } from './actionTypes';
// Action creator with parameters
export const addTodo = (id, title) => {
return {
type: ADD_TODO,
payload: {
id,
title,
},
};
};
Usage Example in a Component:
import { useDispatch } from 'react-redux';
import { addTodo } from './actions';
const TodoInput = () => {
const dispatch = useDispatch();
const handleAdd = () => {
dispatch(addTodo(1, 'Finish project'));
};
return <button onClick={handleAdd}>Add Task</button>;
};