I'm attempting to use Marty v0.10 and React Router v1.0.0. The example React Router provides doesn't seem to allow wrapping a handler in the application container. React Router says to use React.render as opposed to Router.run. The only example of Router.run is on the server side.
My implementation from marty.js v0.10 and React Router v0.13 throws the following error:
Invariant Violation: Router.run needs a callback
This is due to Router.run now expecting 3 parameters. I'm not sure what the second parameter should be in the browser.
Any tips on getting this:
Router.run(routes, (Handler, state) => {
React.render(
<ApplicationContainer app={ application }>
<Handler { ...state.params } />
</ApplicationContainer>,
document.body
);
});
to work with Rect Router 1.0.0 beta?
Obvious question is obvious.
Just throw the render logic into React.render.
React.render(
<ApplicationContainer app={ application }>
{ routes }
</ApplicationContainer>
, document.body
);
Related
I'm developing a chat app where two users can talk to one another and I'm doing this with flask-socketio and React.
I've been struggling with trying to figure out this issue I'm getting with socket.io. Here's the error connection I keep getting once in a while on the browser console:
WebSocket connection to 'ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket&sid=s8DKBembmWoxgGAsAAqX' failed: Insufficient resources
I'm having a difficult time trying to figure out what's causing this error. The way I solved this was to refresh the page and the connection is then re-established. I want to find a solution to this where I don't keep being disconnected from the socket and getting the same error message. Any idea on how to do this?
One common issue with sockets and react is how often you instantiate a WebSocket.
Incorrect usage of sockets in react
Here's an example of how it shouldn't be set up in a react component. Every time the component rerenders, a new socket will be set up, which will cause an Insufficient resources error.
import React, {useState} from 'react'
import { io } from "socket.io-client";
export default function MockSocket() {
const [message, setMessage] = useState("");
const socket = io();
socket.connect();
socket.on("recieve_message", setMessage);
return (
<div>
{message}
</div>
)
}
Correct usage of sockets in react
Instead, wrap the instantiation of WebSockets with a useEffect (such that it only triggers once, and is disconnected when the component is unmounted).
import React, {useEffect, useState} from 'react'
import { io } from "socket.io-client";
export default function MockSocket() {
const [message, setMessage] = useState("");
useEffect(
() => {
const socket = io();
socket.connect();
socket.on("recieve_message", setMessage);
return () => {
socket.disconnect();
}
},
[]
)
return (
<div>
{message}
</div>
)
}
I am creating a dynamic component in Angular 9. I have a <ul> tag in the html template, the sub-elements of which are dynamically loaded from the server (The server will return values like <li>One</li><li>Two</li><li (click)="onLinkClicked(3)">Three</li> using handlebar templates).
private createComponentFromRaw(template: string, containerRef: ElementRef) {
class DynamicComponent {
onLinkClicked(resource: any) {
console.log(resource);
}
}
ɵcompileComponent(DynamicComponent, { template, changeDetection: ChangeDetectionStrategy.OnPush });
ɵrenderComponent(DynamicComponent, {
host: containerRef.nativeElement,
injector: this.injector,
hostFeatures: [ɵLifecycleHooksFeature],
});
}
On calling this.createComponentFromRaw('<li>One</li>', this.ref.element); the component is rendered as expected when run as ng serve but throws the following error at runtime in production mode (ng build --prod):
ERROR Error: Angular JIT compilation failed: '#angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '#angular/platform-browser-dynamic' or '#angular/platform-server'?
- Alternatively provide the compiler with 'import "#angular/compiler";' before bootstrapping.
Looks like the only option currently available is to set buildOptimizer: false in the angular.json
This happens because the buildOptimizer incorrectly considers #angular/compiler as having no side-effects and removes it as part of the tree shaking
I'm using Enzyme, and we can actually use the example component given in the docs as a foundation for my question.
Let's assume this <Foo /> component uses a <Link> component from ReactRouter and thus we need to wrap it in a <MemoryRouter> for testing.
Herein lies the problem.
it('puts the lotion in the basket', () => {
const wrapper = mount(
<MemoryRouter>
<Foo />
</MemoryRouter>
)
wrapper.state('name') // this returns null! We are accessing the MemoryRouter's state, which isn't what we want!
wrapper.find(Foo).state('name') // this breaks! state() can only be called on the root!
})
So, not exactly sure how to access local component state when using <MemoryRouter>.
Perhaps I'm performing an ignorant test? Is trying to get/set component state bad practice in testing? I can't imagine it is, as Enzyme has methods for getting/setting component state.
Just not sure how one is supposed to access the internals of a component wrapped in <MemoryRouter>.
Any help would be greatly appreciated!
So it seems with the latest release of Enzyme there is a potential fix for this issue of accessing state on a child component.
Let's say we have <Foo> (note the use of React Router's <Link>)
class Foo extends Component {
state = {
bar: 'here is the state!'
}
render () {
return (
<Link to='/'>Here is a link</Link>
)
}
}
Note: The following code is only available in Enzyme v3.
Revisiting the test code, we are now able to write the following
it('puts the lotion in the basket', () => {
const wrapper = mount(
<MemoryRouter>
<Foo />
</MemoryRouter>
)
expect(wrapper.find(Foo).instance().state).toEqual({
bar: 'here is the state!'
})
})
Using wrapper.find(Child).instance() we are able to access Child's state even though it is a nested component. In previous Enzyme versions we could only access instance on the root. You can also call the setState function on the Child wrapper as well!
We can use a similar pattern with our shallowly rendered tests
it('puts the lotion in the basket shallowly', () => {
const wrapper = shallow(
<MemoryRouter>
<Foo />
</MemoryRouter>
)
expect(wrapper.find(Foo).dive().instance().state).toEqual({
bar: 'here is the state!'
})
})
Note the use of dive in the shallow test, which can be run on a single, non-DOM node, and will return the node, shallow-rendered.
Refs:
https://github.com/airbnb/enzyme/issues/361
https://github.com/airbnb/enzyme/issues/1289
https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3
Thought it might be useful for you guys, as I stumbled upon this and have a fix.
In my case I have a component which is connected to redux.
class ComponentName extends Component {
...
}
export default connect(
mapStateToProps,
{
...
}
)(ComponentName );
connect() is obviously a HOC component.
So how do we access the "ComponentName" here?
Very simple:
component
.find(ComponentName)
.children()
.first()
.props() // returns ComponentName's props
I have an app that needs to check with a backend API before rendering 404. The routing flow works something like this:
Request comes in to /{INCOMING_PATH}, and the application attempts to fetch and render data from api.com/pages/{INCOMING_PATH}.
If the API returns 404, then the app should return 404. If not, the data is rendered.
I'm not sold on using for this use case. {INCOMING_PATH} will be dynamic, potentially with slashes and extensions in the path. Is this possible to implement in React Router (with proper SSR behavior too)? If so, how should I proceed?
(This question was originally posted on github by another user. They were requested to post it here as it is a support request. But it doesn't seem they did. I am now stuck on exactly the same issue.)
I've solved this with the React Nested Status module.
I'm using https://github.com/erikras/react-redux-universal-hot-example so this code is geared towards that. See React Nested Status for a more generic solution.
Edits to server.js:
at the top
import NestedStatus from 'react-nested-status';
at the bottom replace:
const status = getStatusFromRoutes(routerState.routes);
if (status) {
res.status(status);
}
res.send('<!doctype html>\n' +
ReactDOM.renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}/>));
with:
const repsonse = ReactDOM.renderToString(
<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}/>
);
const status = getStatusFromRoutes(routerState.routes);
if (status) {
res.status(status);
}
const nestedStatus = NestedStatus.rewind();
if (nestedStatus !== 200) {
res.status(nestedStatus);
}
res.send('<!doctype html>\n' + repsonse);
Then in what ever container/component you need to serve a 404 :
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import connectData from 'helpers/connectData';
import { fetchApiData } from 'redux/modules/foo/fetchApiData';
import { NotFound } from 'containers';
#connectData(null, (getReduxState, dispatch, state, params) => {
return dispatch(fetchApiData(params.fooId));
})
#connect(
(reduxState) => ({
fooData: reduxState.foo.data,
})
)
export default class ProductType extends Component {
static propTypes = {
fooData: PropTypes.object,
}
render() {
let content;
// ... whatever your api sends back to indicate this is a 404
if (!this.props.fooData.exists) {
content = <NotFound/>;
} else {
content = (
<div className={styles.productType}>
Normal content...
</div>
);
}
return content;
}
}
Finally replace /src/containers/NotFound/NotFound.js
import React, { Component } from 'react';
import NestedStatus from 'react-nested-status';
export default class NotFound extends Component {
render() {
return (
<NestedStatus code={404}>
<div className="container">
<h1>Error 404! Page not found.</h1>
</div>
</NestedStatus>
);
}
}
I'm not sure what kind of state implementation you are using. But, if you are using redux, then I think the simplest way is to use redux-simple-router. With it, your Routes are synchronized within your state, so you can dispatch action creators to change the router path. I would try to update satate with action creators instead of pushing the state directly from a component. The truth point must be always the state, in your case I would act as follows:
The component that requires to fetch the data will be subscribed to the "dataReducer" which is the isolated state part that this component should care about. Maybe the initial state of dataReducer is an empty array. Then, in componentWillMount you dispatch an action like: dispatch(fetchDataFromApi)) If the response code is 404, then in the action fetchDataFromApi you can dispatch another action, that is just an object like this one:
{type:SET_NOT_FOUND_ERROR}
That action will be handled by the reducer dataReducer, and will return a new state with an object (consider Immutability) that will have a property error, which will be a string with the reason, or whatever you want.
Then, in componentWillReceiveProps method, you, can check if the nextProps have or not have an error. If Error, you can render your error component, or even dispatch an action to go to the error page handled by react-router.
If no error, then you can dispatch an action (thanks to redux-simple-router) to go to the path y
I'm using the react-router and navigate to a component that gets an ID in the URL and has to use this ID to get data from the server with the help of an action.
At the moment I'm calling the action creator in the componentWillMount hook.
This works so far, but brings a problem.
In the render method I have to check, if myData really exists with all its attributes, before I can really render.
#connect(state => {myData: state.etc.myData})
export default class extends React.Component {
componentWillMount = () => {
this.props.dispatch(
ActionCreators.getData(this.props.params.id)
)
}
render() {
if (this.props.myData.hasNotLoaded) return <br/>
...
}
}
Is there another way to get data into the store before rendering without manual checks?
You can subscribe to router's onEnter hook and dispatch actions from where.
const store = configureStore()
const routing = (<Router>
<IndexRoute onEnter={()=>store.dispatch(myLoadDataActionCreator())}/>
</Router>)
So you can avoid setState from previous answer and don't tie up component with redux.
You should create a call back, for example:
_onChange() {
this.setState(myStore.getData());
}
Then in the following react functions do the following:
componentDidMount() {
myStore.addChangeListener(this._onChange);
},
componentWillUnmount() {
myStore.removeChangeListener(this._onChange);
}
I assume you're using the mixins for the react-router, if not, take a look at the docs for it, they have some useful functions that are worth looking at.
I don't think you will need that if logic in the render() method, react will handle that with the virtual dom management and know when to load it and the data.