SWR VS redux-saga

For server-state (data fetched from an API), tools like React Query or SWR shine. They handle caching, refetching, and error states without needing to push API responses into Redux.

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.

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

Redux Saga uses generator functions to manage side effects in Redux. The code below illustrates the use of yield put, which basically acts as the Saga effect creator used to dispatch actions to the Redux store:

Handling Asynchronous Logic: If your application involves complex asynchronous logic (e.g., API calls, side effects), Redux middleware like redux-thunk or redux-saga provides a robust way to handle these scenarios.

For the backend, we chose Python, Django Rest Framework. On the frontend, React, Redux, Saga, Sass. Let’s start with the backend, which was managed by Yegor. He writes about the server part of the project himself.

The whole article properly the best explanation of generators I have come across. This quote stuck out:

> Generators are a special type of function that can return multiple pieces of data during its execution. Traditional functions can return multiple data by using structures like Arrays and Objects, but Generators return data whenever the caller asks for it, and they pause execution until they are asked to continue to generate and return more data.

Applications of generators? I have only used Redux-Saga[1]. Can't even think of other libraries that use them, but would be interested in learning.

[1]: https://redux-saga.js.org/

redux-saga. The most popular effects library in js

Redux can be extended with a lot of other packages. For example with a side effect manager, you can separate side effects from your business logic, help with error handling and in the same process make testing of side effects a lot easier.