Migrating to Object.create(null) for safer state objects

Show how to migrate the Redux initial state object to use Object.create(null) to prevent prototype pollution.

const initialState = Object.create(null);

Create a safer Redux initial state object using `Object.create(null)`. This ensures that the object does not inherit from `Object.prototype`, thus preventing prototype pollution.

initialState.counter = 0;
initialState.todos = [];
// ... continue adding other state properties as needed

Initialize properties on the state object. Since it does not inherit from `Object.prototype`, properties like `hasOwnProperty`, `toString`, etc., will not be present and can't be accidentally accessed or overwritten.

function rootReducer(state = initialState, action) {
  // Handle actions
  switch (action.type) {
    // ... action handlers
    default:
      return state;
  }
}

Define the root reducer function, setting the default state to the safer initial state created with `Object.create(null)`. The state object is therefore protected from accidental property accesses that could occur if the object were inheriting from `Object.prototype`.

<!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>Redux Example</title>
    <style>
        /* Add CSS styles if needed */
    </style>
</head>
<body>
    <!-- Add your HTML markup here -->
    <script src="path/to/redux.js"></script>
    <script>
        // JavaScript code including Redux store setup goes here
    </script>
</body>
</html>

A basic HTML template to include Redux in a web page. Your JavaScript code defining the Redux store, reducers, and integration with the rest of the application will go in the script tags. Make sure to include the Redux library script before your own JavaScript code.