docs: demonstrate selector usage in playground

[libracapitalinvestments-rgb]

Add selector usage in playground connected components to demonstrate how to adapt global Redux state to feature-specific state shapes using exported selectors from feature modules. Closes #109

[gemini-code-assist]

Code Review

This pull request introduces connected components for the counter and todo features, and refactors their respective selectors to use reselect for deriving state from the global RootState. Feedback highlights several critical TypeScript and runtime issues: FCCounter should be imported as a named export, and onDecrement should be removed from its mapDispatchToProps as it is not supported by the component's props. Additionally, the selectors need corrections to match the actual state shapes, specifically using reduxCounter instead of counter, todosFilter instead of filter, and completed instead of done for todo items.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The component FCCounter is exported as a named export (export const FCCounter) in playground/src/components/fc-counter.tsx, not as a default export. You should use a named import here to avoid import errors.

Suggested change

	import FCCounter from '../components/fc-counter';
	import { FCCounter } from '../components/fc-counter';

[gemini-code-assist]

The FCCounter component's props do not include onDecrement. Passing onDecrement in mapDispatchToProps will cause a TypeScript compilation error when connecting the component.

const mapDispatchToProps = {
  onIncrement: countersActions.increment,
};

[gemini-code-assist]

The state shape defined in CountersState has the property reduxCounter, not counter. Accessing counters.counter will result in a compilation error or undefined at runtime.

Suggested change

	export const getCounter = createSelector(
	getCounters,
	counters => counters.counter
	);
	export const getCounter = createSelector(
	getCounters,
	counters => counters.reduxCounter
	);

[gemini-code-assist]

The state shape defined in TodosState has the property todosFilter, not filter. Accessing todos.filter will return undefined instead of the filter value.

Suggested change

	export const getTodosFilter = createSelector(
	getTodos,
	todos => todos.filter
	);
	export const getTodosFilter = createSelector(
	getTodos,
	todos => todos.todosFilter
	);

[gemini-code-assist]

The Todo items in the state use the property completed to track completion status, not done. Accessing todo.done will result in incorrect filtering behavior because it will be undefined.

Suggested change

	(todos, filter) => todos.filter(todo => {
	switch (filter) {
	case 'active':
	return !todo.done;
	case 'completed':
	return todo.done;
	default:
	return true;
	}
	})
	(todos, filter) => todos.filter(todo => {
	switch (filter) {
	case 'active':
	return !todo.completed;
	case 'completed':
	return todo.completed;
	default:
	return true;
	}
	})