React-redux container gets the new props but children do not update


My redux store is being update successfully. The container has the new props however the children still have the old one.

This kind of things as I googled mostly happen from mutations. But as much I can see I don’t have any mutations.

So here is my container component Chat.jsx

import '../../../assets/stylesheets/styles.scss'

import React, { Component } from 'react'
import { connect } from 'react-redux'

import setContactId from '../redux/actions/setContactId'
import setChat from '../redux/actions/setChat'
import submitEmail from '../redux/actions/submitEmail'
import submitMessage from '../redux/actions/submitMessage'

import ddp from '../../ddp'

import Cookies from 'js-cookie'

import View from './views/View'
import Icon from './Icon'

class Chat extends Component {
  componentDidMount () {

  setContactIdFromCookies = () => {
    const contactId = Cookies.get('b2cContactId')
    if (contactId) this.props.setContactId(contactId)

  componentWillReceiveProps = (nextProps) => {
    if (!nextProps.contactId) return

  getChat = async (contactId) => {
    console.log('getChat', contactId)
    await ddp.subscribe('Chats', {contactId})
    const chatCollection = ddp.getCollection('Chats')
    console.log('chatCollection', chatCollection)
    this.props.setChat(this.extractChatFromCollection(chatCollection))'Chats', (changedDoc, message) => {
      console.log('Chats collection item changed', changedDoc, message)
      const chatCollection = ddp.getCollection('Chats')

  extractChatFromCollection = collection => {
    const chatId = Object.keys(collection)[0]
    const chat = collection[chatId]
    chat._id = chatId
    return chat

  emailInputRef = null

  onEmailSubmit = e => {
    console.log('email', this.emailInputRef.value,)

       email: this.emailInputRef.value,
       convertedPage: window.location.href,
       projectId: this.props.projectId,
       visitSessionId: this.props.visitSessionId

  render () {
    if (! return null
    return (
          defaultAdminUserName='default defaultAdminUserName'
          contactName='default contactName'
          supportName='default supportName'
        <Icon />

// DONE: Meteor client???
// TODO: Components

Chat = connect(state => ({
  contactId: state.contactId,
}), { setContactId, setChat, submitEmail, submitMessage })(Chat)

export default Chat

Here is the View.jsx

import React from 'react'
import PropTypes from 'prop-types'

import Messages from './Messages'
import Input from './Input'

const View = props => <div id='chat-container'>
  <div className='chat-box' style={{
    maxWidth: '350px',
    height: '469px',
    background: 'gainsboro',
    WebkitBoxShadow: '0px 0px 20px 0px rgba(0,0,0,0.75)',
    MozBoxShadow: '0px 0px 20px 0px rgba(0,0,0,0.75)',
    boxShadow: '0px 0px 20px 0px rgba(0,0,0,0.75)'
    <div className='chat-header' style={{
      color: '#fff',
      backgroundColor: '#5ebe76',
      fontSize: '22px',
      fontWeight: 'bold',
      padding: '10px 15px'
      onSend={props.onSend} />

View.propTypes = {
  visitSessionId: PropTypes.string.isRequired,
  defaultAdminUserName: PropTypes.string.isRequired,
  contactName: PropTypes.string.isRequired,
  supportName: PropTypes.string.isRequired,
  messages: PropTypes.array.isRequired,
  onSend: PropTypes.func.isRequired

export default View

Here are some of the actions


import { SET_CHAT } from '.'

export default function (chat) {
  return {
    type: SET_CHAT,
    payload: chat


import { SET_CONTACT_ID } from '.'

export default function (contactId) {
  return {
    type: SET_CONTACT_ID,
    payload: contactId

And here is the submitMessage.js, this is the only place I do dirty stuff.

import ddp from '../../../ddp'

export default function ({ message, visitSessionId }) {
  return (dispatch, getState) => {'chat.submitContactMessage', { message, visitSessionId, contactId: getState().contactId }).then((res) => {
      console.log('res', res)

This sends an update to my db. The db gets update. The subscription function in the container works fine. Getting the new document and setting it into the store with the SET_CHAT action. And in the devtools I can see the new chat in the store and as Chat.jsx props. However the View.jsx doesn’t get the new props.