Refactoring with Action Type Constants

Demonstrate how to refactor a Redux application to use constant action type definitions, thus enabling easy updates and preventing bugs when types change.
// actionTypes.js
// Define action type constants
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
This file defines the action type constants to avoid typos and reuse them throughout the Redux application.
// actions.js
import { INCREMENT, DECREMENT } from './actionTypes';

// Action creators using the constants
export function increment() {
  return { type: INCREMENT };

export function decrement() {
  return { type: DECREMENT };
Action creators use the imported constants rather than string literals to specify the type of action being dispatched.
// reducer.js
import { INCREMENT, DECREMENT } from './actionTypes';

// Reducer function using the constants
function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
      return state;

export default counter;
The reducer uses the imported constants to handle specific actions. This ensures that the action types checked in the reducer match those dispatched by the action creators.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Redux Refactoring Example</title>
    <script src=""></script>
    <script type="module" src="./index.js"></script>
    <div id="app">
        <!-- Your HTML content goes here -->
The HTML file includes the Redux library and the main JavaScript module file for the application, where the Redux store and logic will be initialized.
// index.js
import { createStore } from 'redux';
import counter from './reducer.js';
import { increment, decrement } from './actions.js';

// Create Redux store
const store = createStore(counter);

// Dispatching actions using the action creators
The entry JavaScript file where the Redux store is created and actions are dispatched using the action creators that reference the constant action types.