how and when to call a react component methods after state change from redux

More detailed examples would be useful, but based on what you have here, I think I see what you're getting at.

Short answer: Yes, this is a symptom of not moving enough logic to the action creators. Ideally, your component should be a pure view component. No need for componentWillReceiveProps in most cases - you simply render whatever the props are and that's that. This is why Abramov (creator of redux) argues for functional components. More on that here.

If you need to perform other actions after an async call returns with some data, you would do that, as you said, in the action creator. I'm going to go with an example that uses thunks:

EDIT: I added an example of the component passing a reference to the audio player as an argument to the action. That way, the action can manipulate after the async step.

//An async action creator that uses the thunk pattern.
//You could call this method from your component just like any other
//action creator.

export function getMaDatums(audioPlayer, audioContext) {
  return function (dispatch) {

    //make the actual call to get the data
    return fetch(`http://<your stuff here>`)
      .then(data => {

        //call dispatch again to do stuff with the data
        dispatch(gotDataAction(data));

        //call dispatch some more to take further actions
        dispatch(...);

        //since the component passed us references to these, we can
        //interact with them here, after our data has loaded! FTW!
        audioPlayer.doTheThings();
        audioSession.doTheOtherThings();

        //plus anything else you want...
      });
  }
}

If you want to learn more about the doing async stuff with redux, or for that matter, interfacing with stateful libraries from your redux app, I highly recommend giving the redux documentation a good read. The basis of the thunk example above came from here.

Good luck and have fun with React + Redux!

Coming back to my own question years later now.

If I can use a functional component, I would use the react hook useEffect. If the logic can be externalised then perhaps in a saga.

useEffect(() => {
  methodToCallIfPropChanges()
}, [watchedProp]);