Kinderkomponente verbindet nicht

Question

zu speichern

Ich habe eine Komponente, die zu einem Speicher verbindet und zeigen eine untergeordnete Komponente wie unten:

render() { 
 
     return <div> 
 
      <div className="userBox"> 
 
       <ProfilePhoto userid={this.props.id} /> 
 
      </div> 
 
      <div className="nameTitleBox"> 
 
       <div className="firstLastTitle"> 
 
        <h1>{this.props.firstName} {this.props.lastName}</h1> 
 
       </div> 
 
       <IDBox userid={this.props.id} /> 
 
      </div> 
 
      <div className="childcomponent"> 
 
       <childComponent /> 
 
      </div> 
 
      <div className="profileBox"> 
 
       <EditInterests interestsList={this.props.interest} /> 
 
      </div> 
 
     </div> 
 
    } 
 
} 
 

 
export default connect(
 
\t (state) => state.user, 
 
\t UserState.actionCreators 
 
)(User);

es das Kind Komponente will eine intelligente Komponente sein, dass lädt seine eigenen Daten und steuert alles selbst. Der Code dafür ist ziemlich einfach.

import * as React from 'react'; 
 
import { Link, RouteComponentProps } from 'react-router-dom'; 
 
import { ApplicationState } from '../../store'; 
 
import { connect } from 'react-redux'; 
 
import * as ChildState from '../../store/childStore'; 
 

 
export class ChildComponent extends React.Component { 
 

 
    componentWillMount() { 
 
     this.props; 
 
    } 
 

 
    render() { 
 
     return (<div> 
 
         <div className="textCenter"><h2 id="sss">{this.props.text}</h2></div> 
 
         <div className="textRight"> 
 
           <input type="button" className="button" value="Yes" /> <b className="textColor">No</b> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>) 
 
    } 
 
} 
 

 
const mapDispatchToProps = (dispatch) => { 
 
    return { 
 
     action: dispatch(ChildState.actionCreators.requestChildren()) 
 
    } 
 
} 
 

 
export default connect(
 
    mapDispatchToProps, 
 
    ChildState.actionCreators 
 
)(ChildComponent);

this.props in der untergeordneten Komponente ist immer ein leeres Objekt. Nichts aus dem Kinderstaat ist da drin, der Ausgangszustand, die Aktionen, der Versand ... alles. Ich habe ein paar verschiedene Dinge ausprobiert. ChildState wird ordnungsgemäß geladen, wenn ich es tatsächlich im übergeordneten Element lade. Ich weiß nicht, warum es nicht in das Kind geladen wird und die Requisiten verbindet.

Shop unter Hinzufügen:

import { Action, Reducer } from 'redux'; 
 
import { fetch, addTask } from 'domain-task'; 
 
import { AppThunkAction } from './'; 
 

 
export const actionCreators = { 
 
    requestChildren:() => (dispatch, getState) => { 
 
     let url = 'random'; 
 
     var myheaders = new Headers(); 
 
     myheaders.append("X-Requested-With", "XMLHttpRequest"); 
 
     let fetchTask = fetch(url, { 
 
       headers: myheaders, 
 
       credentials: "same-origin" 
 
      }) 
 
      .then(response => response.json()) 
 
      .then(data => { 
 
       dispatch({ type: 'POST_ACTION', children: data }); 
 
      }); 
 
     addTask(fetchTask); 
 
    } 
 
} 
 

 
export const initialState = { ... }; 
 

 
export const reducer = (state = initialState, incomingAction) => { 
 
    const action = incomingAction; 
 
    switch (action.type) { 
 
    case 'REQUEST_ACTION': 
 
     return { 
 
      ... 
 
     }; 
 
    case 'POST_ACTION': 
 
     return { 
 
     ... 
 
     }; 
 
    default: 
 
    } 
 

 
    return state || initialState; 
 
};

Answer 1

Ich glaube, das Problem in mapDispatchtoProps ist haben Sie bindActionCreators

bindActionCreators stellen Sie sicher, Aktion versucht mit (ChildState.actionCreators.requestChildren) fließt durch die Middleware, wenn es welche gibt und dann zu den Reduzierern

import { bindActionCreators} from 'redux'; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
     ChildState.actionCreators.requestChildren}, dispatch); } 

export default connect(
    ChildState.actionCreators, 
    mapDispatchToProps 
)(ChildComponent); 

Answer 2

Dies geschah, weil ich sowohl die Kindkomponente als auch die Verbindungsfunktion exportiert habe. Ich habe den Export für die untergeordnete Komponente entfernt und funktioniert jetzt wie erwartet.