Ditching Redux: A Practical Migration Guide

Why Move On From Redux?

Redux was a revelation back in the day. For complex applications, it offered a predictable state container. But let’s be honest, it’s also become a bit of a chore. The boilerplate, the learning curve, and the sometimes-confusing middleware setups can feel like overkill, especially with modern React features.

If you’re finding Redux to be a burden rather than a helper, it’s probably time to consider alternatives. This isn’t about saying Redux is ‘bad.’ It’s about evolving and using the right tool for the job. Modern React offers excellent built-in solutions and libraries that simplify state management significantly.

What Are The Alternatives?

1. React Context API + useReducer:

This is often the first and most natural step. For many applications that aren’t at massive scale, Context combined with useReducer can handle complex state without external libraries. useReducer is particularly useful for managing state logic that’s more involved than simple useState.

1
// Counter context
2
import React, { createContext, useReducer, useContext } from 'react';
3

4
const initialState = { count: 0 };
5

6
function reducer(state, action) {
7
  switch (action.type) {
8
    case 'increment':
9
      return { count: state.count + 1 };
10
    case 'decrement':
11
      return { count: state.count - 1 };
12
    default:
13
      throw new Error();
14
  }
15
}
16

17
const Context = createContext();
18

19
export const Provider = ({ children }) => {
20
  const [state, dispatch] = useReducer(reducer, initialState);
21
  return (
22
    <Context.Provider value={{ state, dispatch }}>
23
      {children}
24
    </Context.Provider>
25
  );
26
};
27

28
export const useCustomState = () => useContext(Context);
29

30
// Component using the context
31
import React from 'react';
32
import { Provider, useCustomState } from './CounterContext';
33

34
function Counter() {
35
  const { state, dispatch } = useCustomState();
36
  return (
37
    <div>
38
      Count: {state.count}
39
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
40
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
41
    </div>
42
  );
43
}
44

45
function App() {
46
  return (
47
    <Provider>
48
      <Counter />
49
    </Provider>
50
  );
51
}
52

53
export default App;

2. Zustand:

Zustand is a small, fast, and scalable state management solution. It’s hook-based and requires minimal boilerplate. It’s incredibly intuitive and feels very ‘React-y’. You define stores and use hooks to access and modify state.

1
import { create } from 'zustand';
2

3
const useStore = create(set => ({
4
  count: 0,
5
  increment: () => set(state => ({ count: state.count + 1 })),
6
  decrement: () => set(state => ({ count: state.count - 1 })),
7
}));
8

9
export default useStore;
10

11
// Component using the store
12
import React from 'react';
13
import useStore from './store';
14

15
function Counter() {
16
  const count = useStore(state => state.count);
17
  const increment = useStore(state => state.increment);
18
  const decrement = useStore(state => state.decrement);
19

20
  return (
21
    <div>
22
      Count: {count}
23
      <button onClick={increment}>+</button>
24
      <button onClick={decrement}>-</button>
25
    </div>
26
  );
27
}
28

29
export default Counter;

3. Jotai / Recoil:

These libraries are based on the concept of ‘atomic’ state. Instead of a single global store, you have small, independent pieces of state (atoms). This can be very powerful for managing complex, interconnected data where updates to one piece don’t necessarily affect everything.

1
// atoms.js (Jotai example)
2
import { atom } from 'jotai';
3

4
export const countAtom = atom(0);
5
export const incrementAtom = atom(
6
  null,
7
  (get, set) => set(countAtom, get(countAtom) + 1)
8
);
9
export const decrementAtom = atom(
10
  null,
11
  (get, set) => set(countAtom, get(countAtom) - 1)
12
);
13

14
// Component using atoms
15
import React from 'react';
16
import { useAtom } from 'jotai';
17
import { countAtom, incrementAtom, decrementAtom } from './atoms';
18

19
function Counter() {
20
  const [count] = useAtom(countAtom);
21
  const [, increment] = useAtom(incrementAtom);
22
  const [, decrement] = useAtom(decrementAtom);
23

24
  return (
25
    <div>
26
      Count: {count}
27
      <button onClick={increment}>+</button>
28
      <button onClick={decrement}>-</button>
29
    </div>
30
  );
31
}
32

33
export default Counter;

The Migration Process

Moving away from Redux requires a plan. It’s not usually a drop-in replacement.

1. Audit Your State: Identify what state is truly global and what can be managed locally with useState or lifted up to component-level context. Redux is often used for state that doesn’t need to be global.
2. Choose Your Successor: Based on your audit, select the best fit. For simple cases, Context API is fine. For more complex global state with less boilerplate, Zustand is excellent. For highly granular, interdependent state, consider Jotai or Recoil.
3. Phased Migration: Don’t rewrite everything at once. Gradually replace Redux slices with your new state management solution. You can often run both side-by-side during the transition. Start with less critical features.
4. Refactor Reducers/Actions: Translate your Redux reducers and action creators into the logic of your new system. This might involve creating hooks, defining stores, or setting up atoms.
5. Update Components: Modify your React components to consume state from the new source instead of Redux.
6. Testing: Ensure your application behaves as expected. Write new tests for the migrated parts and re-run existing ones.

Final Thoughts

Migrating away from Redux can feel daunting, but the benefits of simpler, more performant, and easier-to-manage state can be huge. Embrace the evolution of React and its ecosystem. You’ll likely find your development experience improves significantly.