reactfire VS redux-toolkit

ReactFire

Are you using Firebase? If not, you probably should. You can call functions (with Auth) from your react app. There's a framework you can use to help: https://github.com/FirebaseExtended/reactfire

I was an early developer at Firebase. I think we made Firebase so easy to use and never spoke on about the technicals that the whole software ecosystem now underestimates the complexity involved. I see various Firebase competitors asserting various "mistakes it makes" without really understanding what it delivers, which is understandable because we never marketed it like that because we spoke only about how it can help you build easier.

The idea that n queries instead of a join is slow is not as true as you would think. Firestore supports streaming and pipelines at its core, and can reuse cache across operations. At the end of the day, the data goes over a narrow network channel. If you can saturate the channel, and don't leave any gaps, what's the performance difference if the data comes from a single query or many that are back-to-back. The data is transferred to the client either way. Both Firebase databases are pipelined, so this "many round trip" argument is not a decent argument if the client can issue the queries without waiting for responses (such as the code in this article).

The other is consistency levels and correctness. I constantly see devs call Firebase an eventually consistent database which is wrong, its causally consistent [1], and this makes a huge difference when trying to do OLTP. The offline capabilities are built on the consistency primitives, and it's the only way it can work. So while this convex article is banging on about "End-to-End Correctness Philosophy", they miss the most important quality of correctness, and if they are not careful, will miss the required engineering, and then be unable to deliver an offline cache over real-time streams. I see this playing out with Supabase, I warned them personally before they got into YCombinator that what they were building was not causally consistent. Since then, they have had to rearchitect their real-time features after shipping them. (I have not reviewed their latest design yet so I have no idea whether they have it right yet).

Many things sucked about Firebase. The bespoke security rules and the lack of views. So Convex is on the money shipping functions on the backend. I think Supabase is shipping competitors' mistakes with row-level security language. Personally, I think Firebase's mistakes can be fixed with the addition of an open-source Firebase server [1], as the clients are already open source and the mistakes are all to do with just the server. The real tech was always in the clients anyway (offline cache, connection management, operation queues).

It will be interesting to see if building expressly for React is a good idea. Firebase shipped many adapters, like https://github.com/FirebaseExtended/reactfire, using the "thin-waist" principle of not over-fitting. But Javascript technology moved from callbacks to async while Firebase was in the field, so the current API is not now idiomatic. But convex is setting itself for even more ecosystem fragility, what if React changes API or falls out of favor? This is a big risk! I hope they can roll with whatever happens!

[1] https://observablehq.com/@tomlarkworthy/redis-backend-1

Since you mentioned you're also using React, we have a React specific library (ReactFire) that also helps out quite a bit.

Use ReactFire! It's our official library for React and Firebase. It has a bunch of useful hooks that probably handle most of the actions you are looking to do.

This is a quick walkthrough of a code example using ReactFire v4 in an application. The application supports login, logout, create an account, and protected routes. We also walk through two approaches for protecting routes since the AuthCheck component that existed in v3 no longer exists in v4 of ReactFire.

FWIW check out ReactFire, it gives you hooks and context for Firebase. Will likely feel more natural than using the vanilla platform-agnostic SDK.

reactfire

In my example I am using Redux Toolkit and I got a prompt for actions to login and logout the user. If I need more functions, I can simply start typing the name, and Copilot provides the completion. For instance, in the example, I'm adding a function to update the user. And of course at the end of the file it suggests the exports.

Check out the official documentation.

Redux Toolkit 2.0

Redux Toolkit 2.0 is almost here! Hopefully shipping by this weekend :) Migration page

I am _thrilled_ to announce that:

Redux Toolkit 2.0 is LIVE!!!

- https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0

This major version has new features, faster perf, smaller bundle size, and removes deprecated options.

It's accompanied by majors for all our Redux family packages

## RTK 2.0:

- a new `combineSlices` method for lazy-loading reducers - Updates to `createSlice` to include a `selectors` field and allow defining thunks inside

- Immer 10 w/ faster updates

- Removal of deprecated options

See the migration guide:

- https://redux.js.org/usage/migrations/migrating-rtk-2

All of the Redux libraries now have modernized packaging with full ESM/CJS compat. They also ship modern JS (no transpiling for IE11), which means smaller bundle sizes.

We've also done byte-shaving work to shrink the bundles (extracting error messages, de-duping imports)

## Redux core 5.0:

- The TS conversion we did in 2019!

- Action types _must_ be strings

- `UnknownAction` as the default action type

- Better preloaded state types

- Internal subscription improvements

- Still marks `createStore` as deprecated!

- https://github.com/reduxjs/redux/releases/tag/v5.0.0

## React-Redux 9.0:

- *Now requires React 18 and RTK 2.0 / Redux 5.0*

Oh hey, that's my post!

(yes I spend too much time refreshing HN :) )

FWIW I did end up with a packaging combination that seems to work sufficiently. I never did fix the "FalseCJS" issue that `are-the-types-wrong` is detecting. I played with double-emitting TS typedefs, and the `tsup` tool _does_ actually have support for that now (added by Andrew Branch from the TS team). So it might be more feasible now. But ultimately I decided I was tired of messing with packaging setup and that what I've got is good enough. (hopefully)

We're actually about to launch Redux Toolkit 2.0 and Redux 5.0 this week, assuming the last couple pieces come together. Here's the latest RCs - you can see the current `package.json` files in there:

- https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0...

- https://github.com/reduxjs/redux/releases/tag/v5.0.0-rc.1

However, Redux, or pure Redux to be specific, can be quite verbose and boilerplate-heavy. It requires a significantly lengthy setup, which is where Redux Toolkit comes in handy, offering a simplified and more efficient way to set up and manage state in your React applications.

State manager is a tool or library that helps manage the state of an application. It provides a centralized store or container for storing and managing data that can be accessed and updated by different components in the application. A state manager solves several problems. Firstly, it is a good practice to separate data and the logic related to it from components. Secondly, when using local state and passing it between components, the code can become convoluted due to the potential for deep nesting of components. By having a global store, we can access and modify data from any component. Alongside React Context, Redux or MobX are commonly used as state management libraries. Learn more Learn more