DEV Community

luiz tanure
luiz tanure

Posted on • Originally published at letanure.dev

State Management with Redux – Managing App State Made Easier

#redux #react #javascript

Note: This article was originally published on June 15, 2016. Some information may be outdated.

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
Enter fullscreen mode Exit fullscreen mode

Create src/store.js

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

const store = createStore(rootReducer);
export default store;
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Define an action creator 

export const inc = () => ({ type: 'counter/inc' });
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
karandeepsingh7070 profile image
Karandeep Singh •

Hi @letanure well explained👏🏻