redux VS react-query

You don't need Redux or Jotai right away.

As the official documentation states: Redux is a pattern and library for managing and updating global application state. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion (without causing side effects or unexpected behaviors).

Redux Documentation

Hmm, that is a good point that `useActionState` accepts a reducer-like function (although I think it's async in this case?).

And yeah, half of Redux's terminology is simply because the existing Flux Architecture libraries from the prior year all used those terms. There were several debates in the issues about whether to name them "actions", "events", or something else, and the conclusion was "let's just stick with the existing Flux terminology":

- https://github.com/reduxjs/redux/issues/891#issuecomment-147...

FWIW, as I've revamped the Redux docs over the years, I have specifically made sure we describe the "actions === events" aspect:

- https://redux.js.org/style-guide/#model-actions-as-events-no...

- https://redux.js.org/tutorials/essentials/part-1-overview-co...

Libraries like Redux or MobX can be used for state management, but it is important to weigh the pros and cons of introducing a centralized state.

Consider using the useReducer hook or a state management library like Redux or Zustand for complex state logic.

Some even go the opposite direction; in the case of Redux, there isn’t a union type to be found despite Redux being a conversion of Elm to JavaScript, and later to TypeScript. The whole point of Unions is ensure you’re Reducers can only do “1 of 3 things”. Instead, you’ll see String constants, or _maybe_ an Enum if you’re lucky. Often it’s dangerous Records used to narrow a domain when a Union should have been used instead.

React and React Native share many core libraries. You can use the same state management libraries like Redux, MobX, and data fetching libraries like Axios or the Fetch API.

Redux Documentation

Redux is a state management library for JavaScript applications that provides a centralized store for managing the state of an app. It follows a predictable state container model where actions are dispatched to trigger state changes, and reducers are used to define how the state transitions in response to those actions. Redux enforces immutability and a unidirectional data flow, which makes debugging easier and state transitions predictable.

React Query: https://github.com/tannerlinsley/react-query

react-query

React Query: This library makes it easy to manage data in your React applications, from fetching to caching and updating data. It offers a simple, powerful, and flexible API for handling data and keeping your UI in sync with your data. https://github.com/tannerlinsley/react-query

useQuery (react-query) (+) all from above (+) even more features (-) more complex, even the examples are complex, has more aggressive defaults (re-fetching every 2s)

see here Overview

Rapini is a new tool that can generate custom React Query hooks using OpenAPI (Swagger) files.

React Query is the gold standard for using async data declaratively with hooks. I ended up needing to modify even my simple useTimer hook to work more like useQuery to take multiple keys in order to work as an inner observable for other operators.

For most situations, I would recommend using a library like React Query. It handles a lot of common data-fetching boiler plate and already accounts for this useEffect() issue. Also, it supports Suspense if you want to use that.

At this point, I want to move on to the react-query cache management library. Give a brief overview and see how you can improve your developer experience with cache using this library.

There isn't the "service" concept in React. If you need to send off data you can just do so with fetch. If you need to load data and cache it so it can be used across components and unmounts, then something like react-query is what I'd recommend. But it's basically a combination of React Context, useEffect, and useState to manage the cache and lifecycle of a request.