Expose a decorator function for Redux containers. about react-error-boundary

[bvaughn]

Just published 1.2.0 with support for this but you'll need to switch away from arrow function to a regular function if you want to use it.

[bvaughn]

Just released via 1.1.0

Thanks!

[blling]

If i want to dispatch an action in ErrorHandler, how to get the redux dispatch? I use this.props.dispatch as follows but it is undefined.

const withConnect = connect(mapStateToProps, mapDispatchToProps);

const withReducer = injectReducer({ key: 'home', reducer });
const withSaga = injectSaga({ key: 'home', saga });

export default compose(
  withReducer,
  withSaga,
  (component) => withErrorBoundary(component
    , ErrorFallback
    , (error) => this.props.dispatch(handleError(error)) // **not work here**
  ), // use ErrorBoundary
  withConnect,
)(HomePage);

Anyone could give me some help? My git branch is here.

[bvaughn]

I think there might be some confusion about how arrow function work. They specifically preserve the lexical this when and where They are declared, rather than when they're invoked. For example:

class ExampleClass {
  callMethods() {
    arrowFunction();            // 'this' will be the window object
    regularFunction();          // 'this' will be the window object
    arrowFunction.call(this);   // 'this' will be the window object
    regularFunction.call(this); // 'this' will be the instance of ExampleClass
  }
}

const arrowFunction = () => {
  console.log('arrowFunction', this);
};

function regularFunction() {
  console.log('regularFunction', this);
}

new ExampleClass().callMethods();

Regardless of the type of method you pass in though, the onError callback is invoked as a standalone function inside of react-error-boundary so it won't have a this.

I guess I could change the code to preserve the this, but in that case I think you'd still need to use this.props.children.props.dispatch to get at the dispatch property.

[blling]

Wow, so fast, i will try it tomorrow, thanks very much @bvaughn !
If i do not use this is there another good practice?

[bvaughn]

You are welcome.

I haven't used Redux in a long time. I'm not sure what the best way to approach this is to be honest.

[blling]

Get it, thanks for your great work again. ^_^