DevTools about react-recollect

[dijs]

Ahhh, 🤦...

I just tried using regex in the console filter and it worked.

For those who find this and need it:

/UPDATE|SET/

Anyways, getting this sucker on the redux devtools would still be highly beneficial, so I won't close this issue just yet.

[dijs]

Well... That was super easy.

In any component you use collect on, you can import and add an inspector:

import { inspectProps } from 'react-inspect-props';
...


export default collect(inspectProps('Inspector')(Component));

Then just make sure you have the Google Chrome Redux DevTools installed.

[davidgilbertson]

Hey, react-inspect-props is great! Thanks for sharing, and thanks for offering to look into it.

In some circumstances, you also might find useful afterChange which would let you conditionally log updates to the console. For example:

import { afterChange } from 'react-recollect';

afterChange(props => {
  if (props.propPath.includes('products')) {
    props.components.forEach(component => {
      console.log(`Updated "${component._name}" because "${props.propPath}" changed`);
    });
  }
});

Or even use a live expression to watch something very specific, like __RR__.getStore().products.filter(product => product.favorite).length.