Javascript - Redux Requisiten undefine

Question

Ich versuche eine Chat-App zu schreiben. Im folgenden Code, wenn ich alle Codes für Gespräche ausschließe, funktioniert es gut (Es ist in Ordnung, wenn ich nur Benutzernamen und versuche, eine Nachricht zu senden). Aber sobald ich alle Codes hinzugefügt habe, die sich auf Konversationen beziehen, bleibt die Meldung "this.props.recipients is undefined." Aber es funktionierte gut, bevor ich konversationsbezogene Codes hinzufügte (zB loadConversations() & confussionList()). Ich konnte auf diese.prop.empfänger zugreifen, bevor ich diese Codes hinzufügte (wie in userList gezeigt werden kann). Was mache ich falsch??

import React from 'react'; 
import { connect, Provider } from 'react-redux'; 
import fetch from 'isomorphic-fetch'; 
import * as actions from './actions/index' 


class Chat extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = {recipientId: '', messageBuffer:'asdfadsfasdf'}; 
     this.userList = this.userList.bind(this); 
     this.changeRecipient = this.changeRecipient.bind(this); 
     this.insertText = this.insertText.bind(this); 
    } 
    componentWillMount(){ 
     this.props.loadConversations(); 

     this.props.loadRecipients(); 
    } 

    userList(){ 
     if(this.props.recipients.length == 0){ 
      console.log('why??'); 
     } 
     else{ 
      console.log('here'); 
      console.log(this.props.recipients.length) 
      return this.props.recipients.map(user=>(<option key = {user._id} value = {user._id}>{user.name}</option>)); 
     } 
    } 


    changeRecipient(e){ 
     e.preventDefault(); 
     this.setState({recipientId: e.target.value}); 
    } 

    insertText(e){ 
     e.preventDefault(); 
     this.setState({messageBuffer:e.target.value}); 
    } 

    newMessage(e){ 
     e.preventDefault(); 
     var recipientId = this.state.recipientId; 
     if (recipientId ===''){ 
      recipientId = this.props.recipients[0]._id; 
     } 
     console.log(recipientId); 
     console.log(this.state.messageBuffer); 
     fetch('/newMessage', 
     { 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       'Authorization' : localStorage.getItem("token"), 

      }, 
      method: "POST", 
      body: JSON.stringify({recipient:recipientId, composedMessage:this.state.messageBuffer}) 
     }) 
     .then(function(response) { 
      console.log(response); 
     }) 
    } 

    conversationList(){ 
     console.log('in conversation list'); 
     console.log(this.props.conversations.length); 
    } 

    render(){ 

     return (
      <div> 
       <form onSubmit = {(e) => this.newMessage(e)}> 
        <select name="recipient" onChange = {(e)=> this.changeRecipient(e)}> 
         {this.userList()} 
        </select> 
        <input type = 'text' name = 'composedMessage' onChange = {(e)=> this.insertText(e)}></input> 
        <input type="submit" value="Submit" ></input> 
       </form> 
       {this.conversationList} 
      </div>) 
    } 


} 

function mapStateToProps(state) { 
    return {recipients: state.recipients, conversations: state.conversations}; 
} 

export default connect(mapStateToProps, actions)(Chat); 

hier ist meine Aktion Schöpfer

import {LOAD_RECIPIENTS, LOAD_CONVERSATIONS } from './type' 

export function loadRecipients(){ 
    return function(dispatch){ 
     fetch("/getRecipients", 
     { 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       'Authorization' : localStorage.getItem("token") 
      }, 
      method: "GET", 
     }) 
     .then(function(response) { 
      return response.json(); 
     }) 
     .then(json=>{ 
      console.log(json.users); 
      console.log('load recipients here!!'); 
      dispatch({type: LOAD_RECIPIENTS, recipients: json.users}); 
     }) 
     .catch(err=>{ 
      console.log(err); 
     }); 
    } 
} 

export function loadConversations(){ 
    return function(dispatch){ 
     fetch("/getConversations", 
     { 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       'Authorization' : localStorage.getItem("token") 
      }, 
      method: "GET", 
     }) 
     .then(function(response) { 
      return response.json(); 
     }) 
     .then(json=>{ 
      console.log(json.conversations); 
      console.log('load conversations here!!'); 
      dispatch({type: LOAD_CONVERSATIONS , conversations: json.conversations}); 
     }) 
     .catch(err=>{ 
      console.log(err); 
     }); 
    } 
} 

und hier ist das Reduktions

import {LOAD_RECIPIENTS,LOAD_CONVERSATIONS} from '../actions/type.js'; 

const initial = {recipients:[], conversations:[]} 


export default function(state = initial, action){ 
    switch (action.type){ 
     case LOAD_RECIPIENTS: 
      return {recipients : action.recipients}; 
      break; 
     case LOAD_CONVERSATIONS: 
      return {conversations : action.conversations}; 
      break; 
     default: 
      return state; 
    } 
} 

Hier ist die Fehlermeldung

Stapel: „userlist @http://localhost:8000/chatbundle.js:24584:1 \ nrender @http://localhost:8000/chatbundle.js:24657:7 \ n_renderValidatedComponentWithoutOwnerOrContext/renderedElement < @http://localhost:8000/chatbundle.js:19501:16 \ nmeasureLifeCyclePerf @http://localhost:8000/chatbundle.js:18781:12 \ n_renderValidatedComponentWithoutOwnerOrContext @http://localhost:8000/chatbundle.js:19500:25 \ n_renderValidatedComponent @http://localhost:8000/chatbundle.js:19527:27 \ n_updateRenderedComponent @http://localhost:8000/chatbundle.js:19451:31 \ n_performComponentUpdate @http://localhost:8000/chatbundle.js:19429:5 \ nupdateComponent @http://localhost:8000/chatbundle.js:19350:7 \ nreceiveComponent @http://localhost:8000/chatbundle.js:19252:5 \ nreceiveComponent @http://localhost:8000/chatbundle.js:2755:5 \ n_updateRenderedComponent @http://localhost:8000/chatbundle.js:19459:7 \ n_performComponentUpdate @http://localhost:8000/chatbundle.js:19429:5 \ nupdateComponent @http://localhost:8000/chatbundle.js:19350:7 \ nperformUpdateIfNecessary @http://localhost:8000/chatbundle.js:19266:7 \ nperformUpdateIfNecessary @http://localhost:8000/chatbundle.js:2787:5 \ nrunBatchedUpdates @http://localhost:8000/chatbundle.js:1399:5 \ nperform @http://localhost:8000/chatbundle.js:3913:13 \ nperform @http://localhost:8000/chatbundle.js:3913:13 \ nperform @http://localhost:8000/chatbundle.js:1338:12 \ nflushBatchedUpdates @http://localhost:8000/chatbundle.js:1421:7 \ ncloseAll @http://localhost:8000/chatbundle.js:3979:11 \ nperform @http://localhost:8000/chatbundle.js:3926:11 \ nbatchedUpdates @http://localhost:8000/chatbundle.js:20569:14 \ nenqueueUpdate @http://localhost:8000/chatbundle.js:1449:5 \ nenqueueUpdate @http://localhost:8000/chatbundle.js:5857:3 \ nenqueueSetState @http://localhost:8000/chatbundle.js:6051:5 \ nReactComponent.prototype.setState @http://localhost:8000/chatbundle.js:6663:3 \ nonStateChange @http://localhost:8000/chatbundle.js:10542:11 \ ndispatch @http://localhost:8000/chatbundle.js:10848:7 \ ncreateThunkMiddleware/http: //localhost:8000/chatbundle.js:24511:16\ndispatch@http://localhost:8000/chatbundle.js:24261:18 \ nloadConversations/http: // localhost: 8000/chatbundle.js: 25207: 4 \ n“

Answer 1

Es stellt sich heraus, es ist ein Fehler, in meinem Reduzierer. Ich habe vergessen, den Spread-Operator hinzuzufügen, so dass der vorherige Zustand vollständig gelöscht wurde.

sollte es

sein

export default function(state = initial, action){ 
    switch (action.type){ 
     case LOAD_RECIPIENTS: 
      return {...state,recipients : action.recipients}; 
      break; 
     case LOAD_CONVERSATIONS: 
      return {...state, conversations : action.conversations}; 
      break; 
     default: 
      return state; 
    } 
}