I was building a dashboard view in my react-admin app, using a custom route and a List. (I found the necessary doc in the Custom App doc)
But ra's List component is bound to current route, location etc.
As I will show multiple lists I guess I may use ListController instead, with a custom view.
This approach lead me to an idea... Why not use react-admin to build both my app's admin and front-end ? I would be able to use the same dataProvider, authProvider, custom actions etc.
Do you, react-admin lovers, think it'd be good idea to try using ra components (List, Edit, ListController...) and leverage the power of ra to build a fully ui-customized production app ?
Is there a proof-of-concept out there ?
I wonder if I should give this a try (I really wan't to) and I'd love it if I could get feedback from developers who endeavored to do just that already.
I think it's a good idea, and it should be relatively straightforward. React-admin controllers (ListController, EditController, CreateController) don't depend on the route explicitely. It's only because they are used as children of Route props that they receive route parameters (rescource, id) in their props. ListController and CreateController do need a location prop to work, because that's where part of their state comes from (the filters in the list, the default values in the create form). But if you pass your own location, it may work.
We could imagine refactoring these controllers to be completely route (and location) independent, but I'm afraid of the added complexity for handling filters in the URL.
Related
I am new to react and I haven't cleared all things in my mind yet.
I am currently working on a project where I need to build a react app with a landing page, a sign up/in page, an ask-a-question page and a answer-question page. Something like a stack overflow clone.
To my knowledge so far I get that I have two choices. 1) use react-router and have a function rendering what I want for each page or 2) have a state like showPage and with some if/else if render the page I want.
What is the correct way to do what I want? And in general when should I use react-router and when just state.
Thanks in advance
You'll always use routing if you have multiple pages to render. As you said you have 3 pages currently you'll need to work on.
Landing page
Sing in/ register
FAQ
What you'll want to do is wrap everything inside your app.js in Router and have say a pages folder that'll have all the pages you want to render.
In React, routers help create and navigate between the different URLs
that make up your web application. They allow your user to move
between the components of your app while preserving user state, and
can provide unique URLs for these components to make them more
shareable. With routers, you can improve your app’s user experience by
simplifying site navigation.
Read more here
You need to separate all this because when your project grows you'll thank yourself for creating specific file for specific workload. It'll be easier to manage. And when you're working on large scale projects you'd want to create layouts and have even bigger distributions.
layouts
|__admin_layout.js
|__user_layout.js
here admin layout will handle all routes specific to admin and user layout will handle all routes specific to users.
Routing helps you manage your pages much better
I have a SPA web application, in REACTJS for investment consultation. However, I have to refactor it to make it possible to share its states by link, so that the user shares the link and by the link the selected items are shared. I want to know if you have a solution through some lib nodeJs or React that helps me solve this problem. Thank you!
If you want to share react state with only an http link and there's no stateful backend, you don't have a lot of options other than keeping state data in the URL. There is a useQueryParams hook would give you the basic tools you need for something like that
https://github.com/pbeshai/use-query-params
You can see some discussion of this technique below with an independent implementation
https://medium.com/swlh/using-react-hooks-to-sync-your-component-state-with-the-url-query-string-81ccdfcb174f
React app Scenario
I have 2 views, UserLister and UserViewer. Both are at different urls. UserLister is a complex table (third party using ag-Grid), with fields, and sort and filtering. UserViewer is an exceedingly complex view with a ton of functionality that takes a while to load up. I want to make it really performant and user friendly to navigate back to UserLister after viewing an individual User. I want it to display all the same sorts and the same information as the user has set up.
To put it another way:
I want the changes that I (or any person) uses on listing page 1 to be available if someone navigates away and then directly back.
Idiomatic way to accomplish this?
How can I accomplish this best in react? is there some function of react-router that would apply here? I would prefer not to have to manage the ?100s? of different states that the UserLister has for sorting/filtering/selecting data manually.
React-router is routing library which manages browser history. You need another tool to save and share state between components. The idea is to make both UserLister and UserViewer to store and access information from some kind of global storage. So each time user enters specific Route data persists.
There are plenty of ways how to do that. Most idiomatic way is to use useReducer hook and then implement "vanilla" Flux architecture (aka unidirectional data flow) in your app.
If you don't want to write all boilerplate by yourself (no judgement here), you can look at Redux, which will do most background work for you.
Redux still requires some good amount of boilerplating. If you don't like it and feel more like streams and observables guy, you can use MobX, which implements reactive programming patterns for state management.
I have a complex form built with react-redux, and I need to know whether this form is valid from another javascript on the same page. Some jquery module.
The easiest way would be add valid/not_valid dynamic class to the react form, and to do something like
$('#myform').hasClass('valid')
But let's say that validation is not the only thing I need from this react app and I want to build a kind of interface for that with some getters. e.g.:
isValid(), getTitle, doSomethingElse methods.
what would be the right way to do that?
Ideally you would store any information you need outside the React application within the store, then simply access the store within whatever jQuery you are writing. This would also work going the other direction, update the store with any particular data that the React application might need to be aware of.
One possible approach:
You can try saving the reference to the store that you instantiate in a global variable.
E.g. Let's say in your top-level React compnonent App.js you do
import MyMainStore from '..../MyMainStore';
.
.
.
<Provider store={MyMainStore}>...</Provider>
//Then finally also do
_MyApp.ReduxStore = MyMainStore;
That way in the non-react/redux part of your app you can access the state via -
_MyApp.ReduxStore.getState().myFormReducer.someExpectedState
Look forward to hearing if that works for you.
I Have react app which contains many pages. For each page i added store. I using params from url for example photoId then passing to actioncreator which call service and then dispatching data to store. In page component i have store listener. Store imiting change and listener calling render for new state.
Store and action creator relates to this page only. How to create pages more simple?
Thank you!
The Flux model (using actions, dispatcher, and stores) works well for larger apps where a data fetch may affect many components and pages. If you think your app will grow then it may be worth the extra verbosity. If you're keeping your app small then composing plain React components is a great way to keep things simple and there is nothing wrong with doing it as long as you separate the data operations from the display, the way your linked example showed. Have fun!