React + Redux: scrolling DOM element after state change

Question

New to Redux here, is really just looking for the "best practice" answer.

I am creating a chat application using React + Redux. My application looks something like this:

• 3 stateless components for my application container, message list and input panel
• Actions to add custom posts / replies
• A reducer that takes these actions and returns an array of messages
• chat middleware that processes a socket message when an ADD_MESSAGE action is dispatched

So far so good. Everything works well, however I'm not sure how / where in this sequence I should do DOM manipulations. In particular, I would like to scroll the bottom of my container message-listwhen the status of messages changes.

All I need to do is something like: messagesListElement.scrollTop = messagesListElement.scrollHeight;but not sure where the right place is for this.

Answer 1

You mentioned that all three components are stateless, which means that the messages are stored in the redux store, which means that they are transmitted as the details of the child components. Basically, there are five life cycle methods that can be activated after / before updating a component.

• componentWillReceiveProps ()
• shouldComponentUpdate ()
• componentWillUpdate()
• componentDidUpdate()
• ()

, , , componentDidUpdate()

componentWillReceiveProps - , , . , , .

, :)