I'm pretty new to React, and I would essentially have a service (one single instance) that I could somehow inject and use in multiple React components.
So far, the options I've come across by googling were:
Using React's context, but it's not recommended, because it is an undocumented API.
Passing the object along in the props, from component to component, but it feels a bit inelegant and tedious
Using an IoC container, such as inversifyJS, who looks great, only it relies on typescript, and I don't wish to write my React app in typescript.
Now, Inversify can apparently be used in vanilla JS, with inversify-vanillajs-helpers, but when I tried using it in React to resolve a component (my App component), it kept throwing an exception stating
"Missing required #injectable annotation in: ReactComponent"
So, I'm trying to figure out a way to get an instance of my service (the same instance shared across the few components that use it), either by making inversify work with React but without typescript, or a new approach I haven't explored yet.
Any ideas ?
There are a few things that you can do if you don't like TypeScript:
First, you are going to need the inversify.decorate method.
Second, this method is probably going to be too verbose for you. We created a helper called inversify-vanillajs-helpers for that reason.
And third, React doesn't play nicely with constructor injection so we created a helper to facilitate lazy property injection called inversify-inject-decorators.
Those three tools should lead yo to the desired result :)
Related
I'm kind of new at testing so I guess I have a pretty simple problem, I followed a tutorial about testing react components that fetches API and I wrote it like this;
The MainPage here just fetches a basic football teams API exactly like shown in the mock fetch. It should return one icon and one name property.
As you can see there is an error, it expects a "promise" from what I've seen but shouldn't it expect HTML ? How can I eliminate this error?
It's difficult to see what the problem is without seeing the implementation of your . TypeScript works across the project, so the problem may be cause by another component.
At the moment, the problem I see is you are not returning your promise from the arrow function.
I'm new to react js and am learning it as part of OJT. Please excuse going forward if i end up using few terms incorrectly.
I'm trying to override few methods of our core module related to logging.
However, in react js overriding is only limited to React.Component classes it seems.
i looked up few posts associated with overriding the methods as per our requirement
is there a way to override normal classes in react js? does ES6 support such a scenario and if so, is it recommended to make it work like java.
The plug-in documentation states:
When adding functionality to Griddle, you’ll likely need to response to actions and update the application state. This can easily be done by adding action handling functions to your reducer object.
I am writing a plug-in to replace the default Pagination with bootstrap styled Pagination. This will need access to getNext() getPrevious() and setPage() in actions. I can clearly see how to access these from inside the Griddle package as the local plug-in does.
I am unsure how I would access these functions and state from a plug-in written in my application.
What do I need to import from Griddle? What do I need to call?
Found it. In the Story Book, the custom page size settings story accesses the selectors and actions exports to give a plugin more direct access to the internals. The other stories around it do a fair job of demonstrating how to access Griddle internals from the a plugin.
Note that in addition to directly accessing the exported selectors and actions, both are available through React Context as well, e.g. in LocalPlugin.components.TableBodyContainer. Context should expose the "best" selectors/actions for the current <Griddle /> after plugins have been applied.
Some work was started in https://github.com/GriddleGriddle/Griddle/pull/743 to make selectors more composable, but the PR has gone stale.
If Cycle uses virtual dom and so does React, then why can I not use React Components inside a Cycle.js app?
Would it be possible to use wrap existing React Components into Cycle.js components ?
This question relates to : Higher order FRP with React - why is it not happening?
Because React's support for Web Components is lacking. See https://github.com/facebook/react/issues/7901 and http://staltz.com/react-could-love-web-components.html
It is technically possible to build React support in Cycle.js, but then you may also start asking whether other frameworks like Ember or Angular or Aurelia should start doing the same out of the box. Then, the question could be expanded even further by asking Aurelia components to be supported in Ember. So building support for "Foo" components in "Bar" framework is counter-productive. Web Components are the sane way to handle this.
Cycle.js is generic enough to be used along other frameworks/libraries. In fact there's redux-cycle-middleware which allows you to use React/Redux along with Cycle.js. With this middleware you wouldn't be using Cycle to handle DOM side-effects; instead you'd use React. Then when you need to handle other side-effects (HTTP, WebSockets, anything that isn't DOM...) you can use Cycle.js.
The question here is not about is this a good idea or not, because there is a real use-case : I'm scraping a specific website from a headless browser for an internal service and I need to extract data from react.
From an active production application, I would like to retrieve props from the root component using only "pure" JavaScript. The only thing I got is a div right now.
The constraints are:
It must be done using pure JavaScript (or using standard React lib)
I cannot add/setup react-devtools extensions or things like that
So far I could always hack into an event handler that I would trigger to manage to enter into React context but I'm looking for cleaner alternatives, any ideas?