首页 文章

react-redux容器获取新的道具,但孩子不会更新

提问于
浏览
0

我的redux商店正在成功更新 . 容器有新道具,但孩子们仍旧旧道具 .

我搜索的这类东西主要来自突变 . 但是我可以看到我没有任何突变 .

所以这是我的容器组件 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 () {
    this.setContactIdFromCookies()
  }

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

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

  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))
    ddp.watch('Chats', (changedDoc, message) => {
      console.log('Chats collection item changed', changedDoc, message)
      const chatCollection = ddp.getCollection('Chats')
      this.props.setChat(this.extractChatFromCollection(chatCollection))
    })
  }

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

  emailInputRef = null

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

    this.props.submitEmail({
       email: this.emailInputRef.value,
       convertedPage: window.location.href,
       projectId: this.props.projectId,
       visitSessionId: this.props.visitSessionId
     })
  }

  render () {
    if (!this.props.chat._id) return null
    return (
      <div>
        <View
          visitSessionId={this.props.visitSessionId}
          defaultAdminUserName='default defaultAdminUserName'
          contactName='default contactName'
          supportName='default supportName'
          messages={this.props.chat.messages}
          onSend={this.props.submitMessage}
         />
        <Icon />
      </div>
    )
  }
}

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

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

export default Chat

这是 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'
    }}>
      <p>{props.supportName}</p>
    </div>
    <Messages
      defaultAdminUserName={props.defaultAdminUserName}
      contactName={props.contactName}
      messages={props.messages}
    />
    <Input
      visitSessionId={props.visitSessionId}
      onSend={props.onSend} />
  </div>
</div>

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

以下是一些行动

setChat.js

import { SET_CHAT } from '.'

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

setContactId.js

import { SET_CONTACT_ID } from '.'

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

这是 submitMessage.js ,这是我做脏东西的唯一地方 .

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

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

这会向我的数据库发送更新 . 数据库获得更新 . 容器中的订阅功能正常 . 获取新文档并使用 SET_CHAT 操作将其设置到商店中 . 在开发工具中,我可以看到商店中的新聊天和 Chat.jsx 道具 . 然而 View.jsx 没有得到新的道具 .

以下是减速机 chatReducer.jsx

import { SET_CHAT } from '../actions'

export default function (state = {}, action) {
  switch (action.type) {
    case SET_CHAT:
      return action.payload
  }

  return state
}

contactId.js

import { SET_CONTACT_ID } from '../actions'

export default function (state = '', action) {
  switch (action.type) {
    case SET_CONTACT_ID:
      return action.payload
  }

  return state
}

和我的 rootReducer

import { combineReducers } from 'redux'

import contactId from './contactId'
import chatReducer from './chatReducer'

const rootReducer = combineReducers({
  contactId,
  chat: chatReducer
})

export default rootReducer

1 回答

  • 0

    我想 extractChatFromCollection 导致你的变异问题,试试这个:

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

相关问题