Using TypeScript Enums for Action Types

Utilize TypeScript enums for defining action types, ensuring that only valid actions can be dispatched and reducing the potential for type errors in the Redux store.

// ActionType.ts
// Define TypeScript Enum for our action types
enum ActionType {
    ADD_ITEM = 'ADD_ITEM',
    REMOVE_ITEM = 'REMOVE_ITEM',
    UPDATE_ITEM = 'UPDATE_ITEM'
}

export default ActionType;

Define a TypeScript enum named 'ActionType' with the potential action types that can be dispatched in the Redux store to add, remove, or update an item.

// actions.ts
import ActionType from './ActionType';

// Action creators
export const addItem = (item: string) => ({
    type: ActionType.ADD_ITEM,
    payload: item
});

export const removeItem = (itemId: number) => ({
    type: ActionType.REMOVE_ITEM,
    payload: itemId
});

export const updateItem = (itemId: number, newItem: string) => ({
    type: ActionType.UPDATE_ITEM,
    payload: { id: itemId, item: newItem }
});

Implement action creators using the defined ActionType enum. Each action creator function returns an action object with a type property (defined by ActionType) and a payload.

// reducer.ts
import { Reducer } from 'redux';
import ActionType from './ActionType';

// Define the state shape
interface ItemState {
    items: string[];
}

// Define the initial state
const initialState: ItemState = {
    items: []
};

// Define the reducer function
const itemReducer: Reducer<ItemState> = (state = initialState, action) => {
    switch (action.type) {
        case ActionType.ADD_ITEM:
            return { ...state, items: [...state.items, action.payload] };
        case ActionType.REMOVE_ITEM:
            return { ...state, items: state.items.filter((_, index) => index !== action.payload) };
        case ActionType.UPDATE_ITEM:
            return { ...state, items: state.items.map((item, index) => index === action.payload.id ? action.payload.item : item) };
        default:
            return state;
    }
};

export default itemReducer;

Implement a Redux reducer using the ActionType enum. The reducer function takes the current state and an action, and returns a new state based on the type of action. Each case in the switch statement corresponds to an enum value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Action Types with TypeScript Enums</title>
    <!-- Include Redux and React libraries (e.g., from CDN) -->
</head>
<body>
    <!-- Add your HTML elements to interact with the Redux store, such as buttons to dispatch actions -->
    <button id="addItem">Add Item</button>
    <button id="removeItem">Remove Item</button>
    <button id="updateItem">Update Item</button>

    <!-- Include your TypeScript-compiled JavaScript files -->
    <script src="./compiledActionType.js"></script>
    <script src="./compiledActions.js"></script>
    <script src="./compiledReducer.js"></script>
</body>
</html>

This HTML structure includes buttons that will interact with the Redux store through actions. The ActionType, actions, and reducer scripts must be included after they've been compiled from TypeScript to JavaScript.

/* styles.css */
button {
    margin: 10px;
    padding: 5px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Basic CSS styling for the buttons that will dispatch actions to the Redux store. Each button has a margin, padding, background color, text color, and other visual effects.