What is the best state management library for a complex single-page application for a front-end developer to implement?

If you mean a complex React single-page application, my default recommendation in 2026 is Redux Toolkit (RTK).

It isn't necessarily the smallest or simplest option, but for a genuinely large SPA—with many features, shared state, complex workflows, asynchronous logic, and multiple developers—it gives you the best combination of structure, scalability, debugging, and maintainability. Redux's own documentation recommends Redux Toolkit as the standard way to write Redux today.

My ranking

Why I'd choose Redux Toolkit

1. It gives your application an architecture.

You can organize state into feature-oriented "slices":

src/
  app/
    store.ts

  features/
    auth/
      authSlice.ts
      authSelectors.ts

    users/
      usersSlice.ts
      usersApi.ts

    orders/
      ordersSlice.ts
      ordersApi.ts

    notifications/
      notificationsSlice.ts

That becomes particularly valuable when an application has dozens of developers and hundreds of components.

2. It handles complicated state transitions well.

For example:

User submits order
      ↓
orderRequested
      ↓
validate cart
      ↓
create order
      ↓
update inventory
      ↓
show notification
      ↓
refresh order history

Redux's action/reducer model makes these transitions explicit and inspectable.

3. Debugging is excellent.

Redux DevTools gives you a very useful mental model:

Initial State
     ↓
ACTION: cart/itemAdded
     ↓
State Change
     ↓
ACTION: checkout/submitted
     ↓
State Change

For complicated production bugs, being able to inspect what happened rather than merely looking at the final state is a major advantage.

4. RTK eliminates most of the old Redux boilerplate.

Modern Redux is very different from the Redux people remember from ~2017. configureStore, createSlice, Immer, built-in middleware configuration, strong TypeScript support, and other utilities significantly reduce the amount of code you need to write.

5. RTK Query is particularly useful.

Redux Toolkit includes RTK Query, which provides fetching, caching, loading states, generated hooks, and cache management.

That means you can potentially have:

Redux Toolkit
├── Client state
│   ├── authentication
│   ├── UI preferences
│   ├── shopping cart
│   └── workflows
│
└── RTK Query
    ├── users
    ├── orders
    ├── products
    └── API cache

When I'd choose Zustand instead

If your "complex" application is really medium-sized, I'd seriously consider Zustand.

Its API is dramatically simpler:

const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}))

It uses a hooks-first model, doesn't require providers, supports selectors, and has optional devtools/persistence/middleware.

So I'd characterize the choice this way:

Zustand:

"I need global state without a lot of ceremony." Redux Toolkit:

"I need a well-defined state architecture for a large application that will continue growing." For a truly complex enterprise-style SPA, I'd pick RTK.

One important caveat

Don't put everything into Redux.

A good modern architecture separates:

• Local UI state → useState / useReducer
• Server/API state → RTK Query or TanStack Query
• Global client state → Redux Toolkit
• URL state → router/search parameters
• Form state → a form library or local state

The biggest mistake is treating "state management" as one problem.

Bottom line

For a complex React SPA: Redux Toolkit + RTK Query is my strongest default recommendation.

If you're building something smaller and want maximum developer speed, choose Zustand instead. Zustand is considerably lighter and easier to learn, while RTK gives you more architectural guardrails as the application grows.

If you tell me whether you're using React, Angular, Vue, or another framework, I can give you a more specific recommendation and a suggested architecture.

For a complex single-page application (SPA), there is no single "silver bullet," but the consensus in modern front-end development heavily favors Zustand (for client state) combined with TanStack Query or Redux Toolkit depending on your specific architectural philosophy.

Modern architectural thinking splits state into two categories: Server State (data fetched from an API) and Client State (UI toggles, user preferences, local app logic). Mixing both into a single legacy global store is usually what makes complex apps hard to maintain.

Top Contenders Ranked by Use Case

• Zustand (The Modern Sweet Spot)
  • Best For: Complex client-side state with minimal boilerplate.
  • Why it shines: It has a tiny footprint (~3KB), hooks-based API that doesn’t require wrapping your app in providers, and allows straightforward structuring of interconnected global data. It scales gracefully in large SPAs without the ceremony of Redux. Check out the Zustand GitHub Repository to see its minimal setup.
• TanStack Query / SWR (The Non-Negotiable Add-on)
  • Best For: Managing server state (caching, synchronization, background fetching).
  • Why it shines: Up to 70% of what developers used to put into Redux or Context is actually server data. Using a dedicated async state manager like TanStack Query eliminates manual loading/error states and automatic cache invalidation.
• Redux Toolkit (RTK) (The Enterprise Standard)
  • Best For: Ultra-large teams, strict architectural constraints, and heavy middleware/debugging needs.
  • Why it shines: While heavier (~15KB), RTK standardizes how data is modified, offers phenomenal time-travel debugging via Redux DevTools, and enforces strict predictable patterns which help massive teams step on each other's toes less often. Explore the Redux Toolkit Documentation if enterprise scale and strict conventions are your top priorities.
• Jotai / Signals (The Atomic Approach)
  • Best For: Fine-grained reactivity and avoiding component re-render cascades.
  • Why it shines: Jotai uses an atomic model (like global useState atoms) which lets components subscribe to micro-slices of state. Great for canvas apps, heavy dashboards, or real-time data feeds. Read more at the Jotai Documentation.

The Recommended Architecture

For a complex SPA, the winning stack is usually a hybrid:

To help narrow down the exact right fit, tell me:

• What framework are you using (React, Vue, Svelte, Angular)?
• Is your complexity driven more by heavy server synchronization or complex local UI interactions/real-time data?

For a complex single-page application (SPA), there is no single "one-size-fits-all" winner, because "state" itself is rarely monolithic. Modern front-end architecture splits state into server/remote state (API data, caching, synchronization) and client/UI state (local toggles, multi-step forms, user preferences).

Depending on your framework of choice (assuming React as the baseline, given its prevalence), the industry consensus points to a modern two-pronged approach rather than heavy, legacy boilerplate.

Top Contenders by Use Case

• Zustand (Best for Global Client/UI State)
  • Why it shines: It has virtually zero boilerplate, doesn't force a Provider wrapper around your app, and works seamlessly outside of React components. For complex, interconnected client-side logic, Zustand provides a clean flux-like store without the mental overhead of Redux.
• TanStack Query / SWR (Best for Server State)
  • Why it shines: In a complex SPA, 80% of what used to go into global stores is actually server data (fetching, caching, deduping, and background re-fetching). Using TanStack Query handles async state brilliantly, eliminating the need to manually manage loading/error states in a global client store.
• Redux Toolkit (RTK) (Best for Enterprise-Scale Predictability)
  • Why it shines: If you are working on a massive team where strict architectural boundaries, powerful time-travel debugging, and deeply structured data mutation patterns are mandatory, Redux Toolkit remains the gold standard of enterprise rigor.
• Jotai / Recoil-style Atomic State (Best for Granular/Derived State)
  • Why it shines: Jotai uses an atomic model where state is split into small, independent pieces that can easily derive other values. It mimics useState globally and prevents unnecessary re-renders across deeply nested component trees.

The Recommended Modern Stack

For a complex SPA today, the "best" implementation isn't choosing just one library—it's combining a server state manager with a lightweight client state manager:

1. Server Data layer: Use TanStack Query (or Apollo Client if strictly GraphQL). Let it handle all caching, pagination, and server synchronization.
2. UI/Local Global layer: Use Zustand for cross-component UI state (e.g., sidebar collapse states, active modals, multi-step wizard data, theme preferences).

This separation of concerns keeps your codebase lean, highly performant, and much easier to reason about than forcing everything into a single giant store.

To help narrow down the exact recommendation, tell me:

• What front-end framework are you using (React, Vue, Angular, Svelte)?
• Is your complex state mostly server-driven (API heavy) or client-driven (complex local interactions/offline data)?

For a complex single-page application, my default recommendation is Redux Toolkit—especially if you're building with React and TypeScript.

The important distinction is that I wouldn't use Redux Toolkit for everything. A modern complex SPA usually benefits from separating client state from server state.

My recommended stack

• Redux Toolkit (RTK) — global client/application state

• Authentication/session state

• UI/workflow state

• Complex business logic

• Multi-step workflows

• State shared across many unrelated components

• Predictable state transitions and debugging

• TanStack Query — server state

• API data

• Caching

• Refetching

• Loading/error states

• Mutations

• Cache invalidation

TanStack's own documentation makes this distinction explicitly: libraries such as Redux and Zustand are primarily client-state managers, while TanStack Query is designed for asynchronous server state.

Why Redux Toolkit for a complex app?

Redux itself has historically had a reputation for boilerplate, but Redux Toolkit is now the official recommended way to write Redux. It provides opinionated defaults, simplifies reducers and immutable updates, provides a structured "slice" model, and includes useful tooling such as Redux DevTools integration.

For a large application, that structure is a feature rather than a drawback.

A typical architecture might look like:

src/
├── app/
│   ├── store.ts
│   └── hooks.ts
│
├── features/
│   ├── auth/
│   │   ├── authSlice.ts
│   │   ├── authSelectors.ts
│   │   └── authTypes.ts
│   │
│   ├── cart/
│   │   ├── cartSlice.ts
│   │   └── cartSelectors.ts
│   │
│   └── checkout/
│       ├── checkoutSlice.ts
│       └── checkoutSelectors.ts
│
└── api/
    └── queries.ts

This feature-oriented organization scales much better than putting one giant store object in a single file.

What about Zustand?

Zustand would probably be my choice for a small-to-medium application where you want minimal ceremony and a very simple API.

But for a genuinely complex enterprise-style SPA, I'd favor Redux Toolkit because the explicit architecture, conventions, middleware ecosystem, selectors, DevTools, and predictable update model become increasingly valuable as the number of developers and features grows.

What about MobX?

MobX is still capable, particularly if you prefer an object-oriented/reactive programming model. But I wouldn't choose it as my default for a new large SPA. Redux Toolkit has a more conventional architecture and broader familiarity among React developers.

One important caveat

Don't put API data into Redux just because it's "global."

For example, instead of:

Redux
 ├── users
 ├── projects
 ├── orders
 ├── products
 └── notifications

I'd generally use:

Redux Toolkit
 ├── auth
 ├── UI state
 ├── checkout workflow
 └── other client state

TanStack Query
 ├── users
 ├── projects
 ├── orders
 ├── products
 └── notifications

That can dramatically reduce the amount of global state you actually need. TanStack specifically recommends this separation because server-state caching otherwise leads to unnecessary reducers, actions, loading/error handling, and synchronization code.

Bottom line

If I were starting a large React SPA today, I'd use TypeScript + Redux Toolkit + TanStack Query. That's a particularly strong combination because each tool has a well-defined job rather than forcing one state-management library to handle the entire application.

Here are top web results for exploring this topic:

Medium·https://medium.com React State Management: Top Libraries & Best Practices - Medium What are the best React state management libraries? When it comes to managing state in React applications, several libraries stand out. Redux, MobX, Jotai, and Valtio are among the top React state man Developer Way·https://www.developerway.com React State Management in 2025: What You Actually Need Learn how to manage state in modern React apps, what is remote, URL, local, and shared state, and when you actually need a state management library. Reddit·https://www.reddit.com Choosing the Best State Management Solution for a Complex ...If you want an easy time with an already establishes state management package with many high quality, complex examples, go with Bloc. You really can't go wrong with it especially if you decide to coll Syncfusion·https://www.syncfusion.com**Top** 5 React State Management Tools Developers Actually Use in ...TL;DR: React state management becomes critical as apps scale, and the “right” library depends on how complex and shared your state is. Redux Toolkit suits large, long‑term apps that need structure and GeeksforGeeks·https://www.geeksforgeeks.org**Top** 10 Single Page Application Frameworks in 2025 - GeeksforGeeks Key features. React's component-based architecture allows developers to create custom and reusable components which results in code efficiency and reusability. React uses virtual DOM to render UI inst Space-O Technologies·https://www.spaceotechnologies.com 8 Best Single-Page Application Frameworks to Use in 2026 8 Top Single-Page Application Frameworks for Web App Development. Home breadcrumb Arrow Web Application Development Guides breadcrumb Arrow Single-Page Application Frameworks. Bhaval Patel By Bhaval P Chimpare·https://chimpare.com 8 Best Single-Page Application Frameworks for Web Apps - Chimpare Google created Angular, one of the most potent Application Frameworks for Web App Development. It is a full framework that consists of everything from shape validation to kingdom control and routing, Strapi·https://strapi.io Compare Built-In vs. External State Management JS Libraries - Strapi Diving Into Built-In State Management. Built-in state management is the native state handling capabilities your frontend framework provides directly, requiring no additional dependencies and offering Redux·https://redux.js.org Redux - A JS library for predictable and maintainable global state ...Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more. Debuggable. The Redux DevTools make it easy to trace when, where, why, a YouTube·https://www.youtube.com Comparing the Top 5 React State Management Libraries - YouTube Project React → https://cosden.solutions/project-react Import React (Newsletter) → https://cosden.solutions/newsletter?s=ytd Repo →

For a complex single-page application (SPA), my default recommendation is Redux Toolkit (RTK)—especially if you're building with React and TypeScript.

Redux itself now recommends Redux Toolkit as the standard way to write Redux logic, and RTK is specifically designed to reduce the boilerplate and complexity traditionally associated with Redux.

My recommendation

Use Redux Toolkit + RTK Query for a large, complex SPA.

A good architecture would be:

• Redux Toolkit — global client/application state
• RTK Query — API data, caching, loading/error states, mutations
• React local state — component-specific UI state
• React Router — URL/route state
• TypeScript — strongly typed state and actions

The important distinction is that you generally shouldn't put everything into Redux.

Why RTK is a strong choice for complex applications

• Predictable architecture: state changes follow a consistent action → reducer → state model.
• Excellent debugging: Redux DevTools lets you inspect and trace state changes.
• Scales well: slices let you organize a large application into domain-specific modules.
• TypeScript support: excellent integration with typed state, actions, selectors, and middleware.
• Good ecosystem: Redux has been around for a long time and has extensive tooling and community knowledge.
• Less boilerplate than old Redux: RTK includes configureStore, createSlice, Immer-based immutable updates, and other conventions out of the box.
• RTK Query: provides data fetching and caching so you don't have to build that infrastructure yourself.

But there is an important alternative: Zustand

If your application is complex but doesn't require a highly structured global architecture, I'd seriously consider Zustand.

Zustand is deliberately much lighter: stores are hooks, there's no provider requirement, and components can subscribe to specific pieces of state.

I'd roughly think about the choices like this:

One other important point: server state and client state are different problems. TanStack Query is specifically designed for fetching, caching, synchronizing, and updating server state.

So if I were starting a substantial React SPA today, I'd probably choose:

React + TypeScript + Redux Toolkit + RTK Query

rather than trying to put API responses, authentication, UI state, forms, and everything else into one giant Redux store.

If the application is more lightweight, I'd choose Zustand instead.

If you're talking about a complex React single-page application, my recommendation in 2026 is:

🥇 Redux Toolkit — best for a genuinely complex SPA

For a large application with many features, developers, cross-feature interactions, complicated workflows, and long-term maintenance, I'd choose Redux Toolkit (RTK).

The Redux team itself recommends Redux Toolkit as the standard way to write Redux today. It provides structured state management, slices, middleware, selectors, Immer-based immutable updates, DevTools integration, and RTK Query for server-data fetching/caching.

Why I'd pick it for a complex SPA

The biggest advantage isn't simply "Redux stores state." It's architecture. As the application grows, RTK gives your team conventions for organizing state into feature slices, controlling mutations, handling asynchronous work, selecting data, and tracing changes. That's particularly valuable when a codebase has dozens of features and multiple developers touching the same state.

But there's an important 2026 caveat

I wouldn't put everything into Redux.

A modern SPA should generally separate:

• Local UI state → React state
• URL state → router/search params
• Server/API state → TanStack Query or RTK Query
• Complex client-global state → Redux Toolkit
• Forms → a form library/local state rather than automatically putting forms in Redux

This is one reason the state-management landscape has moved away from "Redux for everything." Current React discussions increasingly distinguish server state from client state.

What about Zustand?

Zustand is probably my #1 alternative.

If you're building a complex application but the global state isn't architecturally complex, Zustand gives you a much simpler developer experience. Recent React comparisons generally position Zustand as the lightweight choice and Redux Toolkit as the stronger choice for large teams and highly structured applications.

I'd choose:

Zustand → "I need global state, but I don't want an elaborate state architecture."

Redux Toolkit → "This application is going to become a large, long-lived system and I want strong conventions."

Jotai → "My state is highly interconnected/derived and an atomic model fits the problem."

TanStack Query → "My main problem is API/server data rather than client-side state."

My practical recommendation

For a large React SPA, I'd use something like:

React
│
├── React Router
│
├── Redux Toolkit
│   ├── auth
│   ├── user/preferences
│   ├── permissions
│   ├── application/workflow state
│   ├── complex client-side entities
│   └── cross-feature state
│
├── RTK Query / TanStack Query
│   └── API/server state
│
└── Local React state
    └── component-specific UI state

So if you want one answer: Redux Toolkit for a complex, long-lived SPA.

If you tell me whether you're using React + TypeScript, and roughly how complex the app is (e.g. dashboard, SaaS, e-commerce, financial application), I can give you a more specific recommendation between Redux Toolkit vs Zustand vs Jotai vs TanStack Query, including the architecture I'd use.

For a complex single-page application (SPA), the "best" state management library depends largely on your UI framework and whether your app deals more with server-side cache synchronization or heavy client-side domain logic.

Modern front-end architecture separates state into two distinct types: Server State (data fetched from APIs, caching, synchronization) and Client State (UI toggles, themes, local user interactions). Choosing the right tool often means picking a specialized library rather than a monolithic global store.

Here is a breakdown of the top state management solutions categorized by their strengths:

Server State & Data Synchronization

If the complexity of your SPA comes from handling API requests, caching, background refetching, and pagination, dedicated server-state libraries are the gold standard and eliminate the need for massive global stores.

• TanStack Query (React Query / Vue Query / Svelte Query) : The industry standard for managing remote data. It automatically handles caching, background synchronization, deduplication of requests, and optimistic updates. Using this for server data drastically shrinks the amount of global client state you need to write.
• SWR (Stale-While-Revalidate) : Created by Vercel, this is a lightweight, high-performance alternative heavily optimized for React applications that prioritize fast page loads with real-time data revalidation.
• Apollo Client : The premier choice if your complex SPA communicates via GraphQL . It provides a normalized cache out of the box, managing deeply nested relational server data seamlessly alongside local state capabilities.

Global Client State (Flux / Atomic / Immutable)

If your app requires complex, deeply collaborative client-side logic, undo/redo stacks, or intricate UI coordination, these modern client-state libraries offer clean architectures.

• Zustand : A fast, incredibly minimalist flux-based state manager for React. It requires virtually zero boilerplate, doesn't use Context providers, and lets you hook into component state efficiently. It is currently a favorite for medium-to-large SPAs due to its developer experience.
• Redux Toolkit (RTK) : The official, opinionated, and vastly improved evolution of traditional Redux. While older Redux was notorious for boilerplate, RTK standardizes slice creation and includes createAsyncThunk . It remains unmatched for massive, enterprise-scale apps with strict architectural rules and robust debugging requirements.
• Jotai / Recoil: Atomic state management libraries. Instead of a single massive tree, state is broken down into small, independent pieces (atoms) that components can subscribe to directly. Jotai is actively maintained and great for avoiding unnecessary re-renders in complex dashboards.

Framework-Integrated State

If you are working outside of React, modern frameworks often provide robust built-in reactivity that scales exceptionally well without external dependencies.

• Pinia : The official state management library for Vue.js (succeeding Vuex). It is lightweight, fully typed, modular, and offers an intuitive Composition API-based design that feels completely native to Vue 3.
• Signals (SolidJS / Preactor / Angular) : A fine-grained reactivity primitive gaining massive traction across frameworks (natively integrated into modern Angular and SolidJS). Signals update the exact DOM nodes affected without re-rendering component trees, making them exceptionally fast for complex, high-frequency UIs.

To help narrow down the best fit, could you tell me:

• What front-end framework are you using (React, Vue, Angular, etc.)?
• Is your application's complexity driven more by heavy API interactions/caching or complex local UI logic/interactions?

The best overall state management solution for a complex single-page application (SPA) is Zustand for UI-driven state , paired with a dedicated server-state tool like TanStack Query (React Query) for remote data. Modern frontend architecture no longer relies on a single "catch-all" global library. Instead, dividing your complex state into specific concerns yields the highest performance, lowest boilerplate, and easiest developer implementation.

The Modern Modular Strategy

Rather than loading all application data into a single, massive global store, split your architecture into three specialized layers:

┌────────────────────────────────────────────────────────┐
│               Complex SPA Client State                 │
└───────────────────────────┬────────────────────────────┘
                            │
      ┌─────────────────────┼─────────────────────┐
      ▼                     ▼                     ▼
┌───────────┐         ┌───────────┐         ┌───────────┐
│ Server    │         │ Client UI │         │ Complex   │
│ State     │         │ State     │         │ Logic     │
├───────────┤         ├───────────┤         ├───────────┤
│ TanStack  │         │  Zustand  │         │  XState   │
│  Query    │         │           │         │           │
└───────────┘         └───────────┘         └───────────┘

• Server State (API Data): Use TanStack Query . It automatically handles complex caching, background refetching, pagination, and data synchronization without writing manual reducers.
• Client UI State (Modals, Themes, Local Cache): Use Zustand . It gives you a centralized store using simple hooks without forcing you into rigid boilerplate.
• Complex Workflows (Wizards, Step-by-Step Forms): Use XState . This handles strict state machines where your UI transitions through explicit, rule-driven steps.

Comparison of Top Global State Libraries

If you need a unified global state engine, choose the library that aligns with your architectural goals:

Deep Dive: Why These Tools Excel in Complex SPAs

1. Zustand: Best for UI State

Zustand offers a clean balance between simplicity and scalability. It solves the re-render performance issues found in the native Context API by using subscriber selectors.

• Implementation Ease: You can define a store in a few lines of clean JavaScript/TypeScript.
• No Context Providers: It lives outside the React component tree, preventing bulk component re-renders when data changes.
• Native Async Support: Actions can be completely asynchronous out-of-the-box without extra middleware.

2. Redux Toolkit (RTK): Best for Heavy Corporate Strictness

If your SPA spans dozens of distributed engineering teams, Redux Toolkit remains an industry standard.

• Predictability: Strict unidirectional data flow ensures every state change is strictly tracked.
• Time-Travel Debugging: The Redux DevTools extension provides an exhaustive history of every single dispatch event.
• RTK Query: Includes a built-in server-caching layer comparable to TanStack Query.

3. XState: Best for Complex Logic Machines

When your SPA handles complex user journeys (e.g., checkout flows, insurance applications, multi-step configuration dashboards), XState is unmatched.

• Eliminates Impossible States: It enforces strict finite state machines, preventing bugs where two conflicting UI states render simultaneously.
• Visualizer Tools: You can automatically generate visual flowcharts from your code logic to present to product managers.

To help give you a more tailored recommendation, what frontend framework (e.g., React, Vue, Angular) are you using, and what specific type of complex data logic (e.g., real-time websockets, massive data tables, multi-step forms) is your SPA processing?

For a complex single-page application, especially a React + TypeScript application, my default recommendation is Redux Toolkit (RTK).

Why Redux Toolkit is my pick

For a genuinely complex application, the biggest problem isn't storing state—it's keeping state predictable and maintainable as the application and team grow.

Redux Toolkit gives you:

• Clear architecture — slices, reducers, actions, selectors, middleware.
• Excellent TypeScript support.
• Predictable state transitions — particularly valuable when many parts of the UI interact with the same data.
• Excellent debugging through Redux DevTools.
• Strong conventions that help multiple developers structure code consistently.
• Built-in solutions for common problems, including async logic and RTK Query for fetching/caching server data.
• Much less boilerplate than traditional Redux. The Redux team explicitly recommends RTK as the standard way to write Redux applications.

A useful architecture is:

React UI
   │
   ├── Local UI state
   │      └── useState / useReducer
   │
   ├── Server state
   │      └── RTK Query
   │
   └── Application state
          └── Redux Toolkit
                 ├── auth slice
                 ├── user slice
                 ├── cart slice
                 ├── permissions slice
                 ├── workflow slice
                 └── UI slice

What about Zustand?

Zustand is probably my #2 choice, and I'd actually choose it over Redux Toolkit for many medium-sized applications. Its API is dramatically simpler, has very little boilerplate, and uses hooks directly.

The distinction I'd make is:

One important caveat

Don't put everything into Redux.

For example, if your application gets customer/order/product data from an API, that's server state, not necessarily client state. RTK Query is specifically designed to handle fetching and caching that kind of data.

Likewise, something like:

const [isModalOpen, setIsModalOpen] = useState(false);

usually shouldn't become a Redux slice just because Redux exists.

My recommendation

If you're a front-end developer starting a complex SPA today, I'd learn this stack:

React + TypeScript + Redux Toolkit + RTK Query

Then use React's own state for truly local state.

If you want maximum simplicity and you're working solo or on a smaller team, I'd choose:

React + TypeScript + Zustand + TanStack Query

The key is that Redux Toolkit is no longer the old "huge Redux boilerplate" experience. Modern RTK is substantially more ergonomic, while retaining the architectural discipline that becomes valuable when an SPA gets large.

If your goal is specifically becoming a stronger front-end developer, I'd pick Redux Toolkit because learning its concepts—state modeling, reducers, actions, selectors, normalization, middleware, async workflows, and derived state—teaches architectural skills that transfer well beyond the library itself.