search

marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.99k stars 5.25k forks source link

Documentation about Custom App does not allow to integrate react-admin into another app #2025

Closed ric-kin closed 6 years ago

ric-kin commented 6 years ago

What you were expecting: Include react-admin into existing project. Followed instructions on: https://marmelab.com/react-admin/CustomApp.html

What happened instead: When loading a simple List component, output is: TypeError: resourceState is undefined mapStateToProps node_modules/ra-core/lib/controller/ListController.js:413

410 | 411 | return { 412 | query: getQuery(props),

413 | params: resourceState.list.params, 414 | ids: resourceState.list.ids, 415 | selectedIds: resourceState.list.selectedIds, 416 | total: resourceState.list.total

Other information: I passed the "admin", "form" and "i18n" props to the List component. However, admin prop contains no resources. In other words, how can I bootstrap resources to my store's 'admin' state manually?

Environment

djhi commented 6 years ago

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

tomkis commented 6 years ago

Apologies but blindly redirecting someone to SO without even having a look at the problem is strong ignorance.

This is problem of the documentation, definitely not something which should be handled on SO side.

So here's the solution:

You need to manually register resource because you don't use Resource component which does that.

So right after you create the store call registerResource action manually.

import * as reactAdmin from "ra-core";
...
...
const store = createStore....

store.dispatch(reactAdmin.registerResource({
  name: "myStuff",
  hasList: true,
  hasEdit: false,
  hasShow: false,
  hasCreate: false
}));

For 90% of people this is a showstopper when they want to integrate react-admin. Because finding this out will require some source code digging.

djhi commented 6 years ago

Apologies but we might simply have missed this while actively working on this open-source project. Putting all this negativity in a comment instead of simply opening a pull request fixing the documentation is a strong waste of time. I'll gladly accept a pull request though

ric-kin commented 6 years ago

Thank you very much for your help. I was about to ditch using react-admin since I could not get it running properly. Your apology is welcome, I would suggest to keep the github issue public so other users can benefit from your response.

On jue, jul 19, 2018 at 5:52 , Tomáš Weiss notifications@github.com wrote:

Apologies but blindly redirecting someone to SO without even having a look at the problem is strong ignorance.

This is problem of the documentation, definitely not something which should be handled on SO side.

So here's the solution:

You need to manually register resource because you don't use Resource component which does that.

So right after you create the store call registerResource action manually.

import * as reactAdmin from "ra-core"; ... ... const store = createStore....

store.dispatch(reactAdmin.registerResource({ name: "myStuff", hasList: true, hasEdit: false, hasShow: false, hasCreate: false })); For 90% of people this is a showstopper when they want to integrate react-admin. Because finding this out will require some source code digging.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

tomkis commented 6 years ago

@djhi I never meant to offend you, seriously. I really appreciate all the effort that you've put into this project. However, open sourcing this kind of library is a huge commitment. Especially for the project like this which is likely a foundation block. So yeah, sorry for being negative.

I am just a bit tired of fixing a lot of issues caused by the decision to use react-admin as foundation for our app. I don't simply feel like it's stable enough. Which is fine - I do understand it's non-trivial effort to build something like react-admin.

However, I would really appreciate to slow down and focus on improving quality - meaning tickets like these should have highest priority. Thank you for your time anyway.

christiaanwesterbeek commented 6 years ago

blindly redirecting someone to SO without even having a look at the problem

You don't know that.

open sourcing this kind of library is a huge commitment

Using open source software implies an invitation to improve it yourself.

I would really appreciate to slow down and focus on improving quality

They would really appreciate you contributing.

I am just a bit tired of fixing a lot of issues

The more I use react-admin, the more I like it.

djhi commented 6 years ago

@tomkis No problem. Can you be more specific about what you think isnt' stable enough? We are currently focusing on fixing bugs and adding some features without breaking changes.

I would really appreciate more detailed feedbacks. By the way, we use react-admin on almost all our client projects and many have really huge admins. Some of them push react-admin to its limits too ;)

fzaninotto commented 6 years ago

Reopening the issue and marking it as a documentation problem

djhi commented 6 years ago

@ric-kin Would you mind explaining why you need to use react-admin like this ? Is it because of the redux store?

ric-kin commented 6 years ago

@djhi I want to use react-admin as part of a larger application where the admin panel is a subcomponent of an existing redux app. And yes, the main reason for not using the <Admin> and <Resource> approach is that <Admin> creates its own store. I considered to add a route that redirects to <Admin> but it would only work as long as it is defined outside of the larger app's <Provider> and its respective <Connected Router>.

djhi commented 6 years ago

@ric-kin Thanks! I'm investigating a way to make this use case easier :)

tomkis commented 6 years ago

@djhi I kinda had the same use case.

Basically provide our own store. How about it would be possible to pass store down through the props optionally?

IMO this would be most comfortable for the users.

Also another problem with this approach is that users that want / have to use different router than react-router (I use router5) are basically screwed. Application heavily relies on the presence of the router. React-admin could definitely leverage from more abstraction on this front.

Unfortunately, I do not have time to do any rewrite of our app so I can't share concrete obstacles. But once I free myself up a bit, I will definitely share my two cents.

djhi commented 6 years ago

Basically provide our own store. How about it would be possible to pass store down through the props optionally?

It first requires that we rewrite all our state reading operations using selectors (which is a good thing anyway). Then we could follow the redux-form approach. This would be great but will take some time to implement so don't expect it soon

djhi commented 6 years ago

Also another problem with this approach is that users that want / have to use different router than react-router (I use router5) are basically screwed. Application heavily relies on the presence of the router. React-admin could definitely leverage from more abstraction on this front.

Not screwed but they'll have to rewrite significant parts of the library. The good news is those parts should not be too hard to implement: (The Resource component, the mapDispatchToProps of some components, mostly Controllers from ra-core and the auth and redirection side effects.

I'll think about how we could make this easier though

fzaninotto commented 6 years ago

I'm -1 about making the router configurable. This is one of the fundamental building blocks for react-admin (together with Redux, saga, and redux-form).

What's wrong with react-router?

fzaninotto commented 6 years ago

@djhi Shouldn't we just add <Resource context="registration" ... /> lines in the Custom app documentation snippet?

fzaninotto commented 6 years ago

or, since we explain how to create a custom store in CustomApp, I guess we can even accept an external store and skip the creation of our own if it's provided.

tomkis commented 6 years ago

I'm -1 about making the router configurable. This is one of the fundamental building blocks for react-admin (together with Redux, saga, and redux-form).

What if someone has a running application that they either want gradually rewrite to RA or just add it on top of that? They would either be forced to use react-router (which may not always be an option) or they may need to use two collocated routers - which is really impractical.

djhi commented 6 years ago

Not screwed but they'll have to rewrite significant parts of the library. The good news is those parts should not be too hard to implement: (The Resource component, the mapDispatchToProps of some components, mostly Controllers from ra-core and the auth and redirection side effects.

djhi commented 6 years ago

or, since we explain how to create a custom store in CustomApp, I guess we can even accept an external store and skip the creation of our own if it's provided.

Not that simple but yes, I'll try to tackle this asap

fzaninotto commented 6 years ago

Fixed by #2141

dgkm commented 5 years ago

Is there a demo or example application to show the integration with custom react app please?

btoro commented 4 years ago

Does anyone have an example to show the integration with custom react app?

fzaninotto commented 4 years ago

@btoro What's wrong with https://marmelab.com/react-admin/CustomApp.html?