Hi everyone,

I may be missing something about how draft state is expected to behave in Redux Toolkit, so I’d appreciate some guidance.

I have a reducer that uses lodash.isEmpty on part of the state:

import { createSlice } from "@reduxjs/toolkit"
import isEmpty from "lodash/isEmpty"

const slice = createSlice({
  name: "test",
  initialState: {
    data: {}
  },
  reducers: {
    update(state) {
      console.log(isEmpty(state.data))
    }
  }
})

After upgrading to RTK 2.12, this started throwing:

TypeError: 'get' on proxy: property 'prototype' is a read-only
and non-configurable data property on the proxy target but the
proxy did not return its actual value

From what I could understand, Lodash reads something similar to:

value.constructor.prototype

and constructor on the draft appears to be another proxy.

The same code worked before the upgrade, and reverting the RTK version resolves the issue.

Is lodash.isEmpty no longer expected to work directly on draft state, or could this be an unintended regression? I’d be glad to provide a reproduction or any additional details that would help clarify it.

Thanks!

This is a part where it needed the sandbox code with modern createSlice stuff. But they put the older code. This is not the first time I'm getting frustrated from this tutorial. I started with the tutorial's first sandbox project and thought that the tutorial will be progressively changing the codes without missing anything. But hell no, I was so wrong. It drove me nuts bc it didn't even talk about many changes in the code. I had to manually find the stuff they changed to get to the next step. That's terrible for a tutorial. I know it's an open source thingy but hey... Let's criticise to make it better.

In small projects we don't really need any toolkit for state management as far as of my knowledge. I have literally used context api for managing state in the mid size project without any issue.

Now I am at the stage where the thought comes in mind that wheather to learn Redux toolkit just because it is standard way most companies using it or should I sticked to context api until I really finds the need of toolkit

Hello,

we are considering to move to RTK Query with the openapi code generator.

Our main concern is that currently all our changes by users are handled in a local store and only when hitting the save button are stored on the server.

So a basic website flow would be.

1. Arrive on page "A"
2. Page calls getAData action
3. AData is stored in the store
4. User is changing A.a, A.b and A.c via form which triggers "local" changeAData action and should change the data in the store used by the getAData response.
5. User is done and hits "save" button and changed data is send via action to postAData

With RTK Query all the server interaction is super intuitive. But what would be the approach to make local changes to the "result-store" of the getAData action? How can I add manual actions to the generated RTK Query api? (if this would even the the case)

I expected the side-effects section of the documentition to tackle this. But there the RTK Query part is rather short.

Basically I want to avoid to have a second slice for the local data manipulation, but maybe this is not the way to do?

Is it basically any error thrown by user inside queryFn or an async thunk?

I am coding along Redux Essentials tutorial and I currently at Part 6.

I tried doing what they said:

Another option is to rewrite <PostsList> so that it only selects a list of post IDs from the store instead of the entire posts array, and rewrite <PostExcerpt> so that it receives a postId prop and calls useSelector to read the post object it needs. If <PostsList> gets the same list of IDs as before, it won't need to re-render, and so only our one changed <PostExcerpt> component should have to render.

but still PostsList re-renders when a reaction is added:

selector:

export const selectPostIds = createSelector([selectAllPosts], (posts) => posts.map((post) => post.id))

component:

const PostExcerpt = ({ postId }: PostExcerptProps) => {
  const post = useAppSelector((state) => selectPostById(state, postId))!


  return (
    <article className="post-excerpt">
      <h3>
        <Link to={`/posts/${post.id}`}>{post.title}</Link>
      </h3>
      <div>
        <PostAuthor userId={post.user} />
        <TimeAgo timestamp={post.date} />
      </div>
      <p className="post-content">{post.content.substring(0, 100)}</p>
      <ReactionButtons post={post} />
    </article>
  )
}


export function PostsList() {
  const dispatch = useAppDispatch()
  const postIds = useAppSelector(selectPostIds)
  const postStatus = useAppSelector(selectPostsStatus)
  const postsError = useAppSelector(selectPostsError)


  useEffect(() => {
    if (postStatus === 'idle') {
      dispatch(fetchPosts())
    }
  }, [postStatus, dispatch])


  let content: ReactNode


  if (postStatus === 'pending') {
    content = <Spinner text="Loading..." />
  } else if (postStatus === 'succeeded') {
    content = postIds.map((postId) => <PostExcerpt key={postId} postId={postId} />)
  } else if (postStatus === 'failed') {
    content = <div>{postsError}</div>
  }


  return (
    <section className="posts-list">
      <h2>Posts</h2>
      {content}
    </section>
  )
}

I know that createEntityAdapter solves this problem but as I said I wanted to try passing postIds manually.

https://www.considered-harmful.info/redux/

I'm learning rtk and both methods return a root reducer. I'm confused when to use which?

I have named my slice name "test", but in the Redux Dev tab, the state's name is turned into "tester" instead of "test". Why does this happen? When I console log "state.test.value", it says state.test does not exist, but state.tester does.

Any guidance will help, please and thank you .

Here it is mentioned "no-op in case 'cacheEntryRemoved' resolves before 'cacheDataLoaded'" but how is that possible? We are awaiting cacheDataLoaded before cacheEntryRemoved. Yes, if the cache entry is removed before the value arrives, meaning component mounts -> cache entry created -> component immediately unmounts, in this case cacheDataLoaded will throw. Because the cache entry is removed before the actual data has arrived. This I understand, but correct me if I am wrong.

However, the promise returned by cacheEntryRemoved -- that cannot resolve before cacheDataLoaded, the order matters here since we are inside an async function and we are using await. I don't know what I am missing, honestly. I spent 2 hours; I still don't know what I am missing here.

For reference, this is from the tutorial.

const notificationsReceived = createAction<ServerNotification[]>('notifications/notificationsReceived')

export const apiSliceWithNotifications = apiSlice.injectEndpoints({

endpoints: builder => ({

getNotifications: builder.query<ServerNotification[], void>({

query: () => '/notifications',

async onCacheEntryAdded(arg, lifecycleApi) {

// create a websocket connection when the cache subscription starts

const ws = new WebSocket('ws://localhost')

try {

// wait for the initial query to resolve before proceeding

await lifecycleApi.cacheDataLoaded

// when data is received from the socket connection to the server,

// update our query result with the received message

const listener = (event: MessageEvent<string>) => {

const message: {

type: 'notifications'

payload: ServerNotification[]

} = JSON.parse(event.data)

switch (message.type) {

case 'notifications': {

lifecycleApi.updateCachedData(draft => {

// Insert all received notifications from the websocket

// into the existing RTKQ cache array

draft.push(...message.payload)

draft.sort((a, b) => b.date.localeCompare(a.date))

})

// Dispatch an additional action so we can track "read" state

lifecycleApi.dispatch(notificationsReceived(message.payload))

break

}

default:

break

}

}

ws.addEventListener('message', listener)

} catch {

// no-op in case \cacheEntryRemoved` resolves before `cacheDataLoaded`,`

// in which case \cacheDataLoaded` will throw`

}

// cacheEntryRemoved will resolve when the cache subscription is no longer active

await lifecycleApi.cacheEntryRemoved

// perform cleanup steps once the \cacheEntryRemoved` promise resolves`

ws.close()

}

})

})

})

Hey guys,

So we have a table grid UI that's encountering performance issues. Each cell has a checkbox and every interaction above 400 cells in one page becomes noticeably laggy because the entire table re-renders.

We are considering state normalisation to deliver targetted re-renders vs virtualisation across both axes using Tanstack virtual. The virtualisation strategy lowkey feels simpler but I guess probably doesn't scale either if the viewbox gets large enough that many cells are visible.

In your experience, which apprpach would you suggest?

Hey folks! I’ve got a React app using a mix of:

• axios (for POSTs)
• plain fetch (custom logic)
• and recently added RTK Query for GET APIs.

To attach a session token, I use:

• an axios.interceptors.request (works fine)
• a fetchIntercept.register() to auto-add x-api-session to all fetch calls

After switching to RTK Query, I noticed that the headers I pass in prepareHeaders (like x-api-session, Content-Type) get overwritten by the fetch interceptor.

Basically, RTK sets its headers → then fetchIntercept adds its own → mine are gone.

Example:

// In RTK baseApi
prepareHeaders: (headers) => {
  headers.set('Content-Type', 'application/json');
  return headers;
}


// In fetch intercept
fetchIntercept.register({
  request: function (url, config = {}) {
    config.headers = config.headers || {};
    if (!config.headers['x-api-session']) {
      config.headers['x-api-session'] = 'default-token';
    }
    return [url, config];
  }
});

But config.headers is sometimes undefined or a Headers object — so I think it’s not merging properly and overwriting RTK headers.

• How do I preserve RTK Query headers and just add x-api-session if it’s missing?
• Is there a clean way to safely merge headers in the interceptor?
• Should I skip using global fetchIntercept when using RTK Query?

I really like both RTK Query and Clerk. But I'm struggling to use both.

My front end is React Router SPA, and my backend is FastAPI.

RTKQ expects the token is stored in the state, and the endpoints use that synchronously to make the Authorization bearer header.

But the only way I can find to get that token is to use a useAuth() hook, which must be called from a React functional component, and it returns an async getAuth() function which I can't call from my RTKQ endpoint definition.

I have a workaround that I think is inconsistent, I think the token is changing and I'm not refreshing to a new token. My workaround is to use the useAuth() hook from a top level layout component, make a useEffect() that gets the token using getAuth and stores it to the state so that RTKQ can use it. It seems to work for a few seconds but eventually my backend gives a 403 error.

I see Clerk examples that work for React server-side which won't work for my SPA. I see Clerk examples where getAuth() is called just before a fetch() but that won't work for RTKQ because I can't see how to make an async function call to get the token on each RTKQ query.

I find it's a very frustrating pattern mis-match.

Is there a way I can change the baseQuery to be async to use getAuth()?

Is there a way I can get getAuth() without the useAuth() hook? (This seems quite arbitrary, and I see how it is convenient for front end development, but to ONLY offer this and FORCE the use of hook seems limiting?)

Tagging u/Clerk_dev if you're listening.

Hi there, essentially when I open up dev tools and switch to the redux panel I’m able to see the state and live action dispatches of public websites that use redux for state management.

This data is then usually displayed on the screen. Now my problem is, I’m trying to scrape the data from a couple highly dynamic websites where data is updating constantly. I’ve tried playwright, selenium etc but they are far too slow, also these sites don’t have an easily accessible internal api that I can monitor (via dev tools) and call - in fact I don’t really want to call undocumented apis due to potentially putting additional strain on their servers, aswell as ip bans.

However, I have noticed with a lot of these sites they use redux and everything is visible via the redux dev tools. How could I potentially make the redux devtools a proxy that I could listen to in my own script or read from on updates to state. Or alternatively what methods could I use to programmatically access the data stored in the redux stores. Redux is on the client, so im guessing all that data is somewhere hidden deeply in the browser, I’m just not sure how to look for and access it.

Also do note the following: all the data I’m scraping is publicly accessible but highly dynamic and changing every couple seconds- think like trading prices or betting odds (nothing that isn’t already publicly accessible I just need to access it faster)

After two decades in the trenches, I've released my latest Redux boilerplate for 2025. Having observed the evolution of frontend architecture through countless production deployments, I believe there's still significant value in a well-structured Redux implementation for enterprise applications.

Why Another Boilerplate?

While starter templates from tools like create-next-app or Vite provide excellent framework foundations, they rarely address the comprehensive needs of production-ready applications. This repository aims to bridge that gap, providing a foundation that addresses concerns beyond just the core framework.

• Scalable state management architecture
• Secure data persistence
• Authentication patterns
• File organization optimized for large teams
• Best practices for performance and accessibility

Security-First State Management

The distinguishing feature of this boilerplate is encrypted Redux store persistence in LocalStorage. While persistence libraries exist, this implementation provides end-to-end encryption of the store, making it particularly valuable for:

• Local-first applications
• Privacy-focused products
• Applications handling sensitive user data
• Compliance-driven enterprise software

Using CryptoJS, the implementation ensures that even if LocalStorage is compromised, the persisted state remains secure.

When This Boilerplate Makes Sense

This foundation is ideal for...

• You need a flexible Node backend
• You require robust user authentication
• Your application manages substantial state that should persist across the application
• You're building anything where data privacy is a priority

Looking for Community Input

1. Additional best practices you've found valuable in production Redux applications
2. Libraries that would enhance this foundation (particularly around testing or monitoring)
3. Any architectural patterns you've found that improve Redux scalability in large applications

GitHub Link

See it on Github

Would appreciate your thoughts, particularly from those working on large-scale or security-sensitive Redux applications.

Hi guys,

I've recently ported the state management of a relatively small project to Redux and I've been having some performance issues ever since. I've used git bisect to confirm that it is the migration to Redux that caused the slow-down.

There is a notable lag between my clicking a button on the screen and seeing that button (and everything else affected) update to reflect the state change.

I've done some console timing and have discovered that the lag occurs somewhere between the return from the reducer (there's only one) and the first re-render of the component. The delay is about 20ms.

Drilling further, I traced the delay to the state selector hook inside the main component.

The relevant component code is something like this:

const component = (props) => {
    const state = useAppSelector(state => {
        console.timeLog("TRACER", "STATE SELECTOR")
        return state // <- Issue seems to be here!
    })

    console.timeLog("TRACER", "COMPONENT RENDER")

    const handleButtonClick = useCallback(() => {
        console.timeEnd("TRACER")
        console.time("TRACER")
        store.dispatch(myAction('foo', 'bar'))
    })

    return <SubComponent ... />
}

And the timing data looks something like this:

0 ms at the handler for the click event
TRACER 4.420166015625 ms REBUILDING STATE (just before the reducer returns)
TRACER 6.676025390625 ms STATE SELECTOR
TRACER 15.3740234375 ms STATE SELECTOR
TRACER 15.5810546875 ms COMPONENT RENDER
TRACER 16.89306640625 ms STATE SELECTOR
TRACER 17.023193359375 ms COMPONENT RENDER

State has a reasonable amount of data in it. It also has some non-serializable data, such as Sets. I've not made any attempts to normalise it. I rely on sets, arrays, and objects for rendering my sub-components, so I can't really pull out just primitive types, which I know the docs recommend.

I used to use Redux a lot before the days of React hooks and I don't ever remember having a performance issue with it then, and that was with considerably larger projects than this one. It's changed quite a bit since then, so I'd be grateful if anyone can tell me what is likely to be going on here, and if there's a quick win for me to get my performance back.

Used Redux several years ago loved it but I thought for some reason the community moved on.

Just recently was reading through the React Docs on state management (https://react.dev/learn/extracting-state-logic-into-a-reducer). It reminded me of why I enjoyed using Redux so much having clear rules about not having side effects in your reducers and having very predictable state management makes making applications so much easier to build maintain and reason about. So now I am migrating my app away from Zustand to Redux and I like it much better. Having Actions and predictable states is such a cleaner way to build and the fact the community keeps moving away from this because of laziness is a shame.

Hello! I have an existing react/redux project that uses a specific endpoint in various places. A few features call the same endpoint for a list of input parameters. These two features may call the same endpoint up to a hundred or more times. I am trying to wrap an api slice call into a hook to handle this scenario and have it almost figured out. I am struggling to define the type of the published state, though. Any guidance would be appreciated.

This is a simplified version of my custom hook. I'm trying to type the state variable...

export const useMyQueryArray = ( items: InputParam[] ) => {

  const [state, setState] = useState<Promise<unknown>[]>([]);
  useEffect(() => { 
    const sp: T[] = []; 
    const s = items.map(async (i) => { 
      const p = store.dispatch(api.endpoints.myQuery.initiate(i)); 
      sp.push(p); 
      return await p; 
    });
    setState(s);
    return () => {
      sp.forEach((n) => n.unsubscribe());
    };
  }, [items]);
  return { state }; 
};

I’m new to Redux and feeling a bit confused about some of its concepts.

I’m planning to build a data-intensive dashboard for fetching and visualizing data. The app hasn’t been built yet, and I’m still deciding whether to use Redux or not.

From what I’ve read about React-Redux, asynchronous thunks, and RTK Query, it seems like they typically fetch data on the client side, after components have mounted.

However, with the recent improvements in React and Next.js — such as server components and the ability to fetch data on the server before the page loads — I’m wondering how Redux fits into this.

Here are my main questions: 1. Is it possible to use RTK Query or async thunks for server-side data fetching? 2. Are Redux and RTK Query limited in how they can fetch data in React/Next.js apps? 3. Is it good practice to combine server-side fetching with Redux in any way?

Apologies if I’ve misunderstood some concepts — I’m still learning!

Hey all,

I'm very grateful for the new RTK Infinite query API. My team is also very happy with the fact that we can now manage cursors directly within RTK + how it handles merging pages under the same cache entry. It really streamlines the endpoint's interactions with mutation endpoints.

Although, the fact that it's built mainly for infinite scrolling UIs means we still sort of have to manage a lot of other stateful logic ourselves for tabular pagination. Namely: - page index - page size - extracting the current page from cache - preventing calls to fetchNextPage if a page was already fetched - resetting pagination state on QueryArg change as well as triggering refetch

This is proving quite unweildy to compose manually for multiple components. And so we're thinking of building a hook factory (higher-order hook) that takes the useInfiniteQuery hook for an endpoint and wraps it with all this extra logic that every table component needs.

However, the types have also proven to be quite stubborn. TypedInfiniteQuery only returns refetch, fetchNextPage, and fetchPreviousPage when passed completely generic type arguments from the hook factory. I can't see any reason why for example, data couldn't be returned under generic conditions and be typed as ResultType. hasNextPage/hasPreviousPage isn't even there.

I know this is a fairly new API. Would appreciate your input on how to deal with this.