FP in Frontend and Data Pipelines

Pure views and reducers

React's documentation asks components to be pure: given the same props, state and context they should return the same JSX and not mutate pre-existing objects during rendering; side effects belong in event handlers or useEffect. State updates must be immutable so React can detect changes. A reducer is a pure function (state, action) => newState, used by useReducer and by Redux, whose reducers must not mutate state or perform side effects (Redux Toolkit uses Immer to allow mutation-style code safely). Data pipelines follow the same shape: extract, then a chain of pure, testable transformations (map, filter, group, aggregate), then load. Spark, pandas method chaining and stream processors all encourage this style.

A reducer for a todo list

Pure, immutable, exhaustively matched.

type Todo = { id: number; text: string; done: boolean };
type Action =
  | { type: 'added'; id: number; text: string }
  | { type: 'toggled'; id: number }
  | { type: 'removed'; id: number };

function todosReducer(state: readonly Todo[], action: Action): Todo[] {
  switch (action.type) {
    case 'added':
      return [...state, { id: action.id, text: action.text, done: false }];
    case 'toggled':
      return state.map(t => (t.id === action.id ? { ...t, done: !t.done } : t));
    case 'removed':
      return state.filter(t => t.id !== action.id);
    default: {
      const unreachable: never = action;
      return unreachable;
    }
  }
}

// In a React component: const [todos, dispatch] = useReducer(todosReducer, []);
// Testing needs no rendering: todosReducer([], { type: 'added', id: 1, text: 'x' })

Generate ids outside the reducer

Creating ids with Date.now() or crypto.randomUUID() inside a reducer makes it impure. Create them in the event handler and put them in the action.

त्वरित जाँच: What must a Redux or useReducer reducer avoid?

• Mutating the existing state and performing side effects
• Returning a new object
• Using a switch statement
• Accepting an action argument