docs: demonstrate selector usage in playground

playground/src/connected/fc-counter-connected-extended.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { RootState } from '../store/root-reducer';
+import { countersActions } from '../features/counters';
+import { getCounter } from '../features/counters/selectors';
+import FCCounter from '../components/fc-counter';
+
+// mapStateToProps using a selector to derive counter value from global state
+// The selector handles the adaptation from RootState to the value the component needs
+const mapStateToProps = (state: RootState) => ({
+  count: getCounter(state),
+});
+
+const mapDispatchToProps = {
+  onIncrement: countersActions.increment,
+  onDecrement: countersActions.decrement,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FCCounter);

playground/src/connected/todos-connected.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { RootState } from '../store/root-reducer';
+import { todosActions } from '../features/todos';
+import {
+  getTodosFilteredList,
+  getTodosFilter,
+} from '../features/todos/selectors';
+import TodoList from '../components/todo-list';
+
+// mapStateToProps using selectors to derive data from global state.
+// Selectors encapsulate the knowledge of the state shape and
+// any derived computations (e.g., filtering).
+const mapStateToProps = (state: RootState) => ({
+  todos: getTodosFilteredList(state),
+  filter: getTodosFilter(state),
+});
+
+const mapDispatchToProps = {
+  toggle: todosActions.toggle,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList);

playground/src/features/counters/selectors.ts

@@ -1,3 +1,29 @@
-import { CountersState } from './reducer';
+import { createSelector } from 'reselect';
+import { RootState } from '../../store/root-reducer';
 
-export const getReduxCounter = (state: CountersState) => state.reduxCounter;
+/**
+ * Selectors are used to derive data from the Redux store state.
+ * They are composed using `createSelector` from the `reselect` library.
+ *
+ * To adapt global state (RootState) to feature-specific state, we use
+ * a "input selector" that picks the feature slice from the global state.
+ */
+
+// Input selector: picks the counters feature slice from global state
+const getCounters = (state: RootState) => state.counters;
+
+// Derived selectors
+export const getCountersState = createSelector(
+  getCounters,
+  counters => counters
+);
+
+export const getCounter = createSelector(
+  getCounters,
+  counters => counters.counter
+);
+
+export const getCounterHasValue = createSelector(
+  getCounter,
+  counter => counter > 0
+);

playground/src/features/todos/selectors.ts

@@ -1,19 +1,44 @@
 import { createSelector } from 'reselect';
+import { RootState } from '../../store/root-reducer';
 
-import { TodosState } from './reducer';
+/**
+ * Selectors are used to derive data from the Redux store state.
+ * They are composed using `createSelector` from the `reselect` library.
+ *
+ * To adapt global state (RootState) to feature-specific state, we use
+ * a "input selector" that picks the feature slice from the global state.
+ */
 
-export const getTodos = (state: TodosState) => state.todos;
+// Input selector: picks the todos feature slice from global state
+const getTodos = (state: RootState) => state.todos;
 
-export const getTodosFilter = (state: TodosState) => state.todosFilter;
+// Derived selectors
+export const getTodosState = createSelector(
+  getTodos,
+  todos => todos
+);
 
-export const getFilteredTodos = createSelector(getTodos, getTodosFilter, (todos, todosFilter) => {
-  switch (todosFilter) {
-    case 'completed':
-      return todos.filter(t => t.completed);
-    case 'active':
-      return todos.filter(t => !t.completed);
+export const getTodosList = createSelector(
+  getTodos,
+  todos => todos.todos
+);
 
-    default:
-      return todos;
-  }
-});
+export const getTodosFilter = createSelector(
+  getTodos,
+  todos => todos.filter
+);
+
+export const getTodosFilteredList = createSelector(
+  getTodosList,
+  getTodosFilter,
+  (todos, filter) => todos.filter(todo => {
+    switch (filter) {
+      case 'active':
+        return !todo.done;
+      case 'completed':
+        return todo.done;
+      default:
+        return true;
+    }
+  })
+);