Identity function with createAction cause an error with redux-dev-tools

If I a create a basic action with createAction that doesn’t handle any payload, it will use the identity function:

const increment = createAction('INCREMENT')
// increment(42) => { type: 'INCREMENT', payload: 42 }

However, when using redux with react, you often connect your actions creators using mapDispatchToProps, like:

const myContainer = connect(mapStateToPros, { increment })(myComponent)

And then in your component, you directly pass your event to a react event such as:

const component = ({ increment }) => (
    <button onClick={increment}>Click me !</button>
)

Thus, when react will call our action, it will be called with the SyntheticEvent generated by the onClick event as parameter. This event object will end-up in our payload:

// Dispatched action:
{
  type: 'INCREMENT',
  payload: // React pooled event, cf: https://facebook.github.io/react/docs/events.html#event-pooling
}

So if we inspect our page with redux-dev-tools, we get errors like:

warning.js:44 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `screenY` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.warning

To prevent this, we must prevent the original event from being added to the payload. Thus, I have to create my action like:

const increment = createAction('INCREMENT', () => {}) // Provide a no-op function

I’m not really satisfied with this solution, adding a no-op function to any “basic” action that doesn’t handle any payload is a bit obscure I think.

Any idea for a better way around this problem ? Maybe a “Note:” should be added in the docs to prevent others from encountering the same issue.

[macrozone]

just ran into it which froze react-native-debugger. Assuming identity function as default param is maybe not the best idea and can lead to this strange bugs. Not worth a breaking change, i agree. But something to re-consider if this library should ever get a new major version…

Edit: maybe createAction should distinguish between undefined and null for the second parameter. If its undefined, use identity, if its null, this action creator does not take any payload.

so at least you could do createAction("DO_SOMETHING", null)

[yangmillstheory]

It actually fails for stateless functional components too:

export function MyComponent({ callback }) {
  return <div onClick={ () => callback() }>Hello, World!</div>
}

MyComponent.propTypes = {
  callback: PropTypes.func.isRequired,
}

web_1  | ERROR in ./app/core/layer/message.js
web_1  |
web_1  | /var/www/arivale-coach-client/src/app/core/layer/message.js
web_1  |   33:15  error  JSX props should not use arrow functions  react/jsx-no-bind
web_1  |
web_1  | ✖ 1 problem (1 error, 0 warnings)
web_1  |

Passing a function-local reference to onClick does pass the rule though 👍.