vuex VS redux

Vuex is a state management library. At first glance it seems complicated, and in fact it is a bit. You can use Vuex to store data that should be used globally in your app. Vuex provides you with a solid API to apply changes to this data and reflect them in all child components that use Vuex data store.

I encourage you to also go through Vuex's official documentation: https://vuex.vuejs.org/

What makes Vue particularly powerful, however, is that it can be built upon, increasing its functionality from a simple view-model library to that of a fully fledged JavaScript framework capable of powering entire SPA's via supporting plugins and libraries such as Vue Router, Vue Resource, and Vuex.

Comparison, such as Pinia against Vuex, shows that Vuex, the previously recommended library, still has a higher download rate than Pinia. However, even the Vuex official documentation advises developers to opt-in for Pinia, since it is unlikely that Vuex will receive any additional functionalities.

Vuex a state management pattern + library for Vue.js release 4.0 - https://github.com/vuejs/vuex/releases/tag/v4.0.0

> poor support for style libraries like tailwind

Can't relate. Tailwind works fine with anything that supports PostCSS. I run it with Vite and there's zero issues.

> the state management ecosystem is fractured between vuex and pinia

This is also just not true. Pinia is officially replacing Vuex as the recommended store library for Vue [1]. They're also vastly similar in how they do things, so the knowledge transfer over from Vuex to Pinia. And Pinia just address most of the design goals mentioned in the article in the most simple way.

As for Vue 2 -> 3 transition, lots of the larger UI frameworks in the ecosystem is struggling to migrate, despite lots of efforts on the compat layer to smooth the transition, which is a bummer. But as long as you're not doing those sophisticated things, Vue 2 examples should work out-of-box on Vue 3 as well. There are surely less resources for the composition API, but the official introduction guide has been good enough in my experience.

[1]: https://vuex.vuejs.org/#what-is-vuex

Vue has a wide range of use cases that span the whole scale of front-end development. We can use it to add a bit of dynamism into an existing web app, such as adding a simple carousel or content that changes on user interaction e.g mouse movements or text input to creating complex web apps such as e-commerce stores with multiple categories and product pages supporting routing, browser-based data storage via Vue's own libraries such as the vue-router and vuex with features such as a cart, external API call requests and so forth.

replace global state managers like Redux or Vuex

Source: Vuex

When I arrived at the Vuex documentation page, I saw this:

Website: https://redux.js.org/

Recoil was created to provide an alternative to Redux which is another popular state management library for React. In today's adventure, we will see what Recoil is, how it works, why you might want to use it in your React apps and much more..

createGlobalSize also belongs to react-use and it provides a way for you to create a global state that can be shared across multiple components without having to go for state management libraries like redux.

Redux

Absolutely this! (In fact, I got my start working on Redux by volunteering to write an FAQ page for the Redux docs in early 2016.)

When React applications start growing and becoming more complex, managing communication between components can become problematic. When using regular React, the way to communicate is to pass down values and callback functions as props to the child components. However, this can be tedious if there are a lot of intermediary components that the callback must pass through. To address these state communication and management-related issues as the React application grows, Frontend Developers turn to use React with the Redux library. Redux utilizes some architecture patterns that enforce changing states in a React application from a central location. It is really useful when you want to solve common programming problems, develop and manage your application more quickly.

Redux is a state management library. It’s useful when your app’s state is too large, or the logic to update it too complex, among other scenarios.

The high-level scheme We will take a Replicache-like approach of encoding mutations as data (similar to a redux action). On the client, we’ll compute our current state by applying all local mutations to the canonical data we last received from the server. We’ll send a batch of mutations to the server, where the server will decide how to apply them to the now-current canonical data, which may differ from what the client believed to be the canonical data when it applied those mutations. The server-side application of a particular mutation might not result in the same state as the optimistic, client-side application of that mutation and that’s ok! The mutation logic will handle our conflict resolution. After the server applies mutations, it will send the client back the new state and the ID of the latest mutation it applied. The client can then update its canonical state and apply all local mutations after the latest mutation included in the canonical state.

The next step is to create the DropBoxContainer. It is responsible for keeping the data in the correct order, the sorting functionality, and displaying the DropBox components. In a real case, data storage can be taken to a higher level, like React context or Redux store, as well as sorting functionality, which can be placed into separate utils files, but for the sake of the demo, it will be pretty enough. Inside this file, we will iterate over all of our data (visitor's food tables in our case) and render each item as a separate DropBox component.