saga | Next-generation ecommerce framework built with Node.js | Server Side Rendering library

To me it looks like a typo, handleGetUsers vs handleGetUser :)

The error seems to come from a version of sass-loader that doesn't handle node-sass@6.

It has been fixed in sass-loader@11.1.0 by this pull request.

Also note that if you use node@16, you will have to use node-sass@6 (see node-sass version policy)

To sum up: You can use node-sass@6 given you also install a recent sass-loader version.

I agree with your assessment that we ultimately need to make changes on the backend. Any user can mess with the frontend and submit requests in any order they want regardless how you organize it.

I get it though, you're looking to design the happy path on the frontend such that it works with the backend as it is currently.

It's hard to tell without knowing the use-case exactly, but there may generally be some improvements we can make from a UX perspective that will apply whether we make fixes on the backend or not.

Is there an endpoint to send multiple updates to? If so, we could debounce our network call to submit only when there is a delay in user activity.

Does the user need to be aware of order of selection and the impacts thereof? If so, it sounds like we'll need to update frontend to convey this information, which may then expose a natural solution to the situation.

It's fairly simple to create a request queue and execute them serially, but it seems potentially fraught with new challenges.

E.g. If a user clicks 5 checkboxes, and order matters, a failed execution of the second update would mean we would need to stop any further execution of boxes 3 through 5 until update 2 could be completed. We'll also need to figure out how we'll handle timeouts, retries, and backoff. There is some complexity as to how we want to convey all this to the end user.

Let's say we're completely set on going that route, however. In that case, your use of Redux for state management isn't terribly important, nor is the library you use for sending your requests.

As you suggested, we'll just create an in-memory queue of updates to be made and dequeue serially. Each time a user makes an update to a box, we'll push to that queue and attempt to send updates. Our processEvents function will retain state as to whether a request is in motion or not, which it will use to decide whether to take action or not.

Each time a user clicks a box, the event is added to the queue, and we attempt processing. If processing is already ongoing or we have no events to process, we don't take any action. Each time a processing round finishes, we check for further events to process. You'll likely want to hook into this cycle with Redux and fire new actions to indicate event success and update the state and UI for each event processed and so on. It's possible one of the libraries you use offer some feature like this as well.

I personally try to keep as little things as possible global - mostly things co-located within a certain feature. If something really needs to be accessible everywhere in the app, it's likely it's own feature. If there is a single query that needs to be used in multiple features, I do have a top level queries directory where they are, but there is really not much in there.

As for selectors: I inline them in the useQuery hook, if I need them more than once, I extract them to a function, and if that's get out of hand, I put them in a separate file next to the queries, like:

You can separate the two applications, each with their own routes and redux provider.

You are using race wrong way. You can fix like this:

It seems like you are definitely guilty of some over-typing here. Certainly yield Network.get() returns a Business, right? You shouldn't have to write const businessDetails: Business if the value that you are assigning to it is a Business.

These generator return types can be really hard to type properly, but Typescript is smart enough to figure out the proper type. You could leave it off entirely and it would be fine. If you've having a hard time figuring out the correct type you can delete the return type temporarily to see what the inferred type is. That's how I resolved your first issue, which is that that the union Business | BusinessesContainer needs to be changed to an intersection Business & BusinessesContainer.

I don't know what the ActionPayload type is but it seems unnecessary. You are typing the payload of your put action as ActionPayload>, but Array is correct on its own. There's no reason for the payload to be optional when you are always providing it.

Those two changes solve your typescript issues...for now. I usually see API calls executed inside a call effect, which would make the types even more complex. But I'm not sure if the call is actually required.

Fixed the issue by installing codelyzer globally

npm install -g codelyzer

I deleted node_modules and installed it again with

npm install

Both optimistic concurrency control and pessimistic locking result in a saga instance to only being able to handle 1 message.

Might multiple messages be handled then with :

• Optimistic concurrency control: The 2nd+ writer will fail and the message will be retried.

• Locking: THe lock ensures that multiple messages on the same saga instance will be delayed. Sometimes this can result in a deadlock due to lock escalation and then the message will be retried.

Regarding pessimisitic vs optimistic, you cannot choose. The latest version uses pessimistic locking. See https://docs.particular.net/persistence/sql/saga-concurrency:

Starting in version 4.1.1 conflicts cannot occur because the persistence uses pessimistic locking. Pessimistic locking is achieved by performing a SELECT ... FOR UPDATE or its dialect-specific equivalent.

Up to and including version 4.1, SQL persistence uses optimistic concurrency control when updating or deleting saga data.