redux VS SWR

In frontend, the most probably well-known approach is Flux and its most common implementation, Redux. This is an example of unidirectional data flow.

The best known example of an architecture with unidirectional data flow is Flux and, as its implementation, Redux.

CRA makes integrating libraries like Redux and React Router easy without requiring complex Webpack and Babel configurations.

Dva. A plugin-based state management solution (Redux + Sagas). Also quite popular in narrow communities outside of the Umi world.

If you use Redux or the useReducer() hook, the idea is almost the same. Instead of reducing data, we are reducing actions. What we've referred to as the accumulator is accumulating the state, and the value is whatever action is being performed to update the state. We can take a group of actions and allow each one to make changes.

Official Redux Docs

Redux - is a predictable state container for JavaScript applications, commonly used with React for managing application state. It centralizes the state of an application, making it easier to manage and debug while facilitating predictable behavior through a unidirectional data flow.

Something I have already seen in many different code bases using frontend libraries like React and Vue is that developers use advanced state management solutions (e.g. Redux, Vuex, or Pinia) way too often.

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).

Following is overview picked from SWR site.

If you need more robust features—like caching, re-fetching, or pagination—check out libraries like React Query or SWR. Many of these tools also offer optional Suspense modes, so you can keep your data-fetching code clean while benefiting from powerful caching and refetching mechanisms.

Client-Side Data Fetching with useQuery can be used for interactive components that need to fetch data on the client-side, with initial state hydrated from server-side fetched data. For fetching data that changes frequently or for adding client-side interactivity it is useful the useSWR strategy. It’s a React hook for client-side data fetching with caching and revalidation. It allows fetching data on the client side, usually after the initial page load. Nevertheless, it does not fetch data at build time or on the server for SSR, but it can revalidate and fetch new data when required.

SWR for lightweight data fetching

⚡ SWR Documentation

swr

We can do this with React-Query, SWR, Redux Toolkit Query and many others.

This is a common approach in JS land, and there are plenty of libraries that help abstract the logic and make sure the state is consistent, like swr or TanStack Query.

SWR is a React Hook for data fetching that makes it easy to fetch, cache, and revalidate data at the component level.