absent-sapphire
absent-sapphireβ€’14mo ago

State management

What is the canonical way to manage app state in Refine? I went through tutorial and it appears it doesn't have an app state, and components talk to backend through the data provider. I don't want to push the state to the backend, my backend is read-only for this app and I want to keep the state locally. In classical React that would be Redux or something similar.
11 Replies
kapa.ai
kapa.aiβ€’14mo ago
Hi @kikap_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine uses React Query for all state management processes source (https://refine.dev/blog/how-to-become-a-production-hero-refine-2022/). Although it's primarily used for data fetching and server state, you can still use it for local state management. If you need more advanced local state management, you can integrate other state management libraries like Redux alongside Refine. Keep in mind that Refine is designed to be flexible and customizable, so you can use it with your preferred state management solution. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.aiβ€’14mo ago
<@399396499609354242> kapa.ai is still learning and improving, please let us how it did by reacting below
absent-sapphire
absent-sapphireβ€’14mo ago
@kapa.ai One of the top hits on Google is this: https://blog.bitsrc.io/using-refine-to-build-an-admin-panel-e7d29d8a80dd which ways that Refine is strongly opinionated on state management in particular. This piece triggered the question.
Medium
Using Refine to Build an Admin Panel
refine is a React-based framework for building data-intensive applications in no time
kapa.ai
kapa.aiβ€’14mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Refine is indeed opinionated about state management, as it uses React Query for handling state management processes source (https://refine.dev/blog/refine-pixels-1/). React Query is primarily used for data fetching and server state, but it can also be used for local state management. However, Refine is designed to be flexible and customizable, so if you prefer to use another state management library like Redux for local state management, you can integrate it alongside Refine. The framework allows you to adapt it to your specific needs and preferences. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.aiβ€’14mo ago
<@399396499609354242> kapa.ai is still learning and improving, please let us how it did by reacting below
equal-aqua
equal-aquaβ€’14mo ago
Hey @kikap_, Have you hear about that react-query persistent query state. https://tanstack.com/query/v4/docs/react/plugins/createSyncStoragePersister If it suit your case you can check our our example: https://refine.dev/docs/examples/persistQuery/
absent-sapphire
absent-sapphireβ€’14mo ago
yeah, i have, since like a few hours ago πŸ™‚ thanks for the example, very helpful!
quickest-silver
quickest-silverβ€’14mo ago
Just to second this, in general even outside of refine, react-query + react's context and use reducer is the new preferred way of managing state if you are starting a new project( as it used to be react+redux back in the day). This is the opinion of most React experts I get to talk to.
absent-sapphire
absent-sapphireβ€’14mo ago
Good to know, thanks! It's been quite a while since I had to deal with React
quickest-silver
quickest-silverβ€’14mo ago
quickest-silver
quickest-silverβ€’14mo ago
second comment it's actually official version supported by from both Redux maintainers and maintainers of React Query in other words if you already use Redux it's not recommended migrating to react-query, but starting from scratch is better to do so with React Query welcome back. I think you might enjoy the progress in react ecosystem.