Return: React Component: will there be memory leak?

Want in the class that is responsible for interaction with the API to catch all errors, not to catch them in every component by calling methods of this class. Problem: class not associated with the React and Redux. Just a class with static methods. But the error handler should be able to dispatchit action games in store.

I think to implement something like this (code written on the knee, it probably won't work, just an illustration of the idea):
const ErrorsHandler(error) => {
const mapDispatchToProps = dispatch => ({
 newError: () => {
 dispatch( { type: 'NEW_ERROR' } );
}
}); 
const DispatcherErrors = (props) => {
props.newError();
return null;
}

// Return a function-the component connected to store
 return connect(null, mapDispatchToProps)(DispatcherErrors)
}


// POST request, the error is passed to the handler
 API.post('auth', { login, pass })
.then(
 res => res,
 err => ErrorsHandler(err)
)


A General description of the idea: to wrap a react component that is connected to storm to the function, the function to call, passing the error in it.

All anything, but due to lack of understanding of the react-redux, I'm not sure that there will be memory leaks. Function DispatcherErrors is passed to connect and maybe it will be a link somewhere in the bowels react-redux. Then, each time calling the function, I will create new components and old ones will not be deleted.
June 5th 19 at 21:19
1 answer
June 5th 19 at 21:21
Solution
Useless to reinvent the wheel.

Option 1. If you are using redux-thunk:
export const handleError = error => ({ type: 'NEW_ERROR', payload: error });
export const doSomething = data => ({ type: 'DO_SOMETHING', payload: data });

import { apiCall } from './api';
import { handleError, doSomething } from './actionCreators';

export const asyncAction = () => dispatch => {
 try {
 const result = await apiCall();
dispatch(doSomething(result));

 return result;
 } catch (e) {
dispatch(hanldeError(e));
}
};

similarly, you can use the block catch if you use the redux saga.
If not use one of these middleware, I recommend rather to get to know them and start to use.

Option 2. If you are not using:
export const handleError = error => ({ type: 'NEW_ERROR', payload: error });
export const doSomething = data => ({ type: 'DO_SOMETHING', payload: data });

import { connect } from 'react-redux';
import { apiCall } from './api';
import { handleError, doSomething } from './actionCreators';

class ExampleComponent extends React.Component {
 componentDidMount() {
 const { dispatch } = this.props;

apiCall().then(
 res => dispatch(doSomething(res)),
 err => dispatch(handleError(err)),
);
}

 render() { /* ... */ }
}

export default connect()(ExampleComponent);

or:
import { connect } from 'react-redux';
import { apiCall } from './api';
import { handleError, doSomething } from './actionCreators';

class ExampleComponent extends React.Component {
 componentDidMount() {
 const { doSomething, handleError } = this.props;

apiCall().then(
 res => doSomething(res),
 err => handleError(err)
);
}

 render() { /* ... */ }
}

mapDispatchToProps = {
handleError,
doSomething,
};

export default connect(null, mapDispatchToProps)(ExampleComponent);


Generally, the easiest way to do dispatch in a store is:
store.dispatch(someAction());

Before beginning to invent another bike, I would strongly recommend to study the documentation of react, redux and react-redux.
Actually I love and use both of these middleware.
I just called "the hunted". Was the only component (authorization form), which nafig not need interaction with the stor. When I started to write a handler for it, it occurred to me that a component should not handle errors, I decided to take this logic out... and went running with increasing odor code. So when working alone on a project, there is no one to say "Stop, you do not go there!".
Of course You are right and it is necessary to transfer and the error handler in action creators and what I came up with - just not the right approach.
Although the question was about memory leak. but really, Your answer removes the question itself. Thank you.
If someone else will answer about a memory leak, happy to also note the answer. - Garett34 commented on June 5th 19 at 21:24

Find more questions by tags ReactRedux