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
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:
----------------------<@399396499609354242> kapa.ai is still learning and improving, please let us how it did by reacting below
xenial-black•16mo 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
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:
----------------------<@399396499609354242> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade•16mo 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/
xenial-black•16mo ago
yeah, i have, since like a few hours ago 🙂 thanks for the example, very helpful!
rival-black•16mo 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.
xenial-black•16mo ago
Good to know, thanks! It's been quite a while since I had to deal with React
rival-black•16mo ago
rival-black•16mo 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.