Skip to main content

State Management with Redux – Managing App State Made Easier

June 15, 2016

Redux became the most popular Flux‑inspired state library during 2016, thanks to Dan Abramov’s time‑travel demo at React Europe and rapid community adoption.

Core concepts

  • Store – holds one immutable state tree.
  • Action – plain object that describes “what happened”.
  • Reducer – pure function (state, action) ⇒ newState.
  • Dispatch – send an action to update state.
  • Provider – React binding that makes the store available.

Install and set up

# Add Redux and React bindings
npm install redux react-redux --save

Create src/store.js

import { createStore } from 'redux';
import rootReducer from './reducer';

const store = createStore(rootReducer);
export default store;

Write a reducer

// src/reducer.js
const initial = { count: 0 };

export default function reducer(state = initial, action) {
  switch (action.type) {
    case 'counter/inc':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

Reducers return new objects; they never mutate the old state.

Define an action creator

export const inc = () => ({ type: 'counter/inc' });

Actions are serialisable, making time‑travel debugging possible.

Wire Redux into React

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store, { inc } from './store';

function Counter() {
  const count = useSelector(s => s.count);
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(inc())}>
      Clicked {count}
    </button>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

useSelector reads from the store, and dispatch sends actions. React components stay stateless; Redux owns the data flow.

Why Redux gained traction

  • Predictability – single source of truth and pure reducers make bugs easier to trace.
  • DevTools time travel – rewind and replay actions while editing code.
  • Tiny API – just a handful of functions compared with heavier Flux variants.
  • Strong React pairing – react-redux 5.0 landed late 2016, optimised for React 15+.
  • Community learning – free Egghead course and countless tutorials helped newcomers.
  • Survey love – State of JS 2016 showed Redux leading satisfaction charts.

Keep it simple

Start with one reducer; split later with combineReducers.
Avoid over‑architecting small apps—Redux shines when state is shared across many components.

Recent posts

Tags