Managing Software Complexity with Abstraction, Composition, and Functional Programming in Redux/React

This article discusses the problem of software complexity and two main strategies to control it: abstraction and composition.

Abstraction simplifies the world by extracting common concepts and building models that guide implementation. Examples include category theory, Linux treating all I/O as files, and Redux treating all events as actions.

Composition builds complex concepts from simple ones and splits large tasks into low‑coupling subtasks that can be solved independently and then combined.

The article then shows how abstraction and composition are applied in functional programming. High‑order functions such as map, filter and reduce provide generic operations that can be specialized by passing concrete functions.

const list = [9, 5, 2, 7];
map(a => a + 1, list) // => [10, 6, 3, 8]
map(a => a * a, list) // => [81, 25, 4, 49]

Using compose (right‑to‑left) or pipe (left‑to‑right) we can combine high‑order functions to process data streams.

const totalTaskCount = compose(
  reduce(sum, 0),               // 4. sum all RD tasks
  map(person => person.tasks),   // 3. extract task count
  filter(person => person.type === 'RD'), // 2. keep RD only
  filter(person => person.segment === '到餐') // 1. keep "to‑restaurant" segment
);

From this functional foundation the article derives Redux. The type signature of reduce is transformed into the Redux signature:

redux :: ((state, action) -> state) -> initialState -> [action] -> state

. Redux processes an infinite event stream via dispatch (push) and getState (pull).

const redux = (reducer, initialState) => {
  let currentState = initialState;
  const dispatch = action => { currentState = reducer(currentState, action); };
  const getState = () => currentState;
  return { dispatch, getState };
};

The article compares reduce and Redux, highlighting that reduce works on a finite list (cold signal) while Redux works on a potentially infinite event stream (hot signal). It also discusses middleware as a way to transform actions before they reach the reducer, analogous to transduce in Clojure.

Finally, the article explains pure functions in React: React can be seen as a pure function view = React(state). Pure functions have no side effects, are referentially transparent, cacheable, and easier to test. By keeping the UI rendering pure, React/Redux can efficiently update only when the state actually changes.

In summary, the article shows how abstraction, composition, high‑order functions, and stream‑based state management (Redux) together provide a systematic approach to handling software complexity in modern front‑end development.