Using the createSelector Hook with memoization

Provide an example of using reselect's createSelector within Redux Toolkit to compute derived data from the state, leveraging memoization.

import { createSelector } from '@reduxjs/toolkit';

// Selector without memoization
const selectNumOfTodos = state => state.todos.length;

// Create a memoized selector using createSelector
const selectCompletedTodosCount = createSelector(
  [state => state.todos], // Input selectors
  (todos) => todos.filter(todo => todo.completed).length // Output selector
);

export default selectCompletedTodosCount;

This piece of code imports the createSelector utility from Redux Toolkit and defines two selectors. The first one, selectNumOfTodos, simply counts the todos in the state, without memoization. The second one, selectCompletedTodosCount, is a memoized selector created with createSelector. It takes the list of todos as input and returns the count of completed todos, using a memoized function to avoid unnecessary recalculations when the state doesn't change.

import React from 'react';
import { useSelector } from 'react-redux';
import selectCompletedTodosCount from './selectors';

const CompletedTodosCounter = () => {
  // Using the memoized selector with useSelector
  const completedCount = useSelector(selectCompletedTodosCount);

  return <div>Completed Todos: {completedCount}</div>;
};

export default CompletedTodosCounter;

This piece of code demonstrates how to use the memoized selector created with reselect within a React functional component. It imports the useSelector hook from 'react-redux' and the previously defined memoized selector, selectCompletedTodosCount. The selector is then used with useSelector to get the number of completed todos, and the value is displayed in the component.

body {
  font-family: 'Arial', sans-serif;
}

/* Simple CSS for displaying the counter */
div {
  margin: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  display: inline-block;
}

This is the accompanying CSS to style the CompletedTodosCounter React component. It includes a body style to set the font family for the entire page, and styles for the div tag, which will affect how the counter is displayed.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Redux Selector Example</title>
  <style>
    /* External CSS can be placed here or included as a separate file */
  </style>
</head>
<body>
  <div id='root'></div>
  <!-- Your bundle script will be included here -->
  <script src='path-to-your-bundled-script.js'></script>
</body>
</html>

This is the basic HTML structure for a web page that will host the CompletedTodosCounter React component. The div with the id 'root' is the mounting point for the React application. A script tag is included at the end of the body to include the bundled JavaScript file that contains the React code and Redux setup.