Is Redux Dead? Why I Kicked Redux Out of Our SaaS App

?Connect: https://www.subham.online

?Twitter: https://twitter.com/TheSubhamMaity

A few months ago, I took the plunge and refactored parts of a SaaS app I’ve been working on for a while. We had Redux in there, doing its thing, managing global state. But something felt off — the codebase was growing bulkier, and Redux started feeling... heavy. You know, like when you carry around stuff in your backpack that you haven’t touched in months? That’s how it felt.
But as our app grew, so did the complexity. Redux started to feel less like a solution and more like a problem. We were writing more boilerplate than actual logic.

? The Redux Dilemma

One day, while battling yet another Redux-related bug, I stumbled upon React Query. After some research, I came across React Query. I’ve heard a lot of buzz around it, but I never thought it could completely replace Redux. Then I gave it a try.

Before (with Redux):

// Action
const fetchUserData = (userId) => async (dispatch) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const response = await api.fetchUser(userId);
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', error });
  }
};

// Reducer
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

// Component
const UserProfile = ({ userId, fetchUserData, userData, loading, error }) => {
  useEffect(() => {
    fetchUserData(userId);
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={userData} />;
};

const mapStateToProps = (state) => ({
  userData: state.user.data,
  loading: state.user.loading,
  error: state.user.error,
});

export default connect(mapStateToProps, { fetchUserData })(UserProfile);

After (with React Query):

const useUserData = (userId) => {
  return useQuery(['user', userId], () => api.fetchUser(userId));
};

const UserProfile = ({ userId }) => {
  const { data, isLoading, error } = useUserData(userId);

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={data} />;
};

export default UserProfile;

Instead of manually fetching data, writing reducers, dispatching actions, and then updating the store, React Query did most of that heavy lifting for us. Pair that with some well-crafted custom hooks, and we had a lean, mean state-management machine.

? But Wait, Is Redux All Bad?

Now, don't get me wrong. Redux isn't the boogeyman. It's a powerful tool that has its place. If you're building an app with complex client-side state that needs to be shared across many unrelated components, If you’re working with deeply nested state, or if you need a more explicit control over the flow of your app but for 90% of cases, especially for handling server state, React Query custom hooks is more than enough.

So, why the fuss? Sometimes, as devs, we fall into the trap of using what’s familiar, even when there are better tools out there. That’s what happened with me and Redux. I was stuck in my old ways, thinking Redux was the only way to manage state in larger apps. I mean, the whole internet was saying “Redux or bust!” right?

? The Plot Twist

Here's the kicker: by removing Redux, we actually made our app MORE scalable. Counter-intuitive, right? But think about it – with React Query handling our server state and custom hooks managing local state, we had a clear separation of concerns. Each part of our app became more modular and easier to reason about.

? Is Redux dead?

Honestly, in the last few months, I’ve seen very few cases where React Query didn’t meet my needs.

So, is Redux dead? Maybe not, but it’s definitely not the all-star it used to be. For handling server state in modern React apps

So, there you have it. Our journey from Redux addiction to React Query enlightenment. It wasn't always easy – there were moments of doubt, late-night debugging sessions, and more than a few facepalms. But in the end, it was worth it.

If you're feeling bogged down by Redux in your own app, I encourage you to take a step back and ask yourself: do you really need it? You might be surprised by the answer.

sometimes less is more. Especially when it comes to state management. Now if you'll excuse me, I have some more reducers to delete. Happy coding!

The above is the detailed content of Is Redux Dead? Why I Kicked Redux Out of Our SaaS App. For more information, please follow other related articles on the PHP Chinese website!