React/Redux Versand Funktion funktioniert nicht

Question

Ich benutze 'react-fileupload' um Dateien auf meinen Server hochzuladen. Im Erfolgsfall erhalte ich eine Antwort mit dem Inhalt dieser Datei. Also in einer Komponente möchte ich Datei hochladen und Speicherstatus ändern und in einer anderen Komponente möchte ich diese Daten anzeigen.

Aber ich weiß nicht, warum meine Versandfunktion nicht funktioniert.

Komponente mit Uploader:

import React, { Component } from 'react'; 
import FileUpload from 'react-fileupload'; 
import { connect } from 'react-redux'; 
import { updateOverview } from '../actions/index'; 
import { bindActionCreators } from 'redux'; 

class Header extends Component { 
    render() { 
    const options = { 
     baseUrl: 'http://127.0.0.1:8000/api/upload_file', 
     chooseAndUpload: true, 
     uploadSuccess: function(res) { 
     console.log('success'); 
     updateOverview(res.data); 
     }, 
     uploadError: function(err) { 
     alert(err.message); 
     } 
    }; 
    return (
     <div> 
     <FileUpload options={options} ref="fileUpload"> 
      <button 
      className="yellow darken-2 white-text btn-flat" 
      ref="chooseAndUpload"> 
      Upload 
      </button> 
     </FileUpload> 
     </div> 
    ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ updateOverview }, dispatch); 
} 

export default connect(null, mapDispatchToProps)(Header); 

Komponente, wo die Daten angezeigt:

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

class Overview extends Component { 
    renderContent() { 
    console.log(this.props.overview); 
    if (!this.props.overview) { 
     return <div> Upload file!</div>; 
    } 
    return this.props.overview; 
    } 
    render() { 
    return (
     <div> 
     <h1>Overview</h1> 
     {this.renderContent()} 
     </div> 
    ); 
    } 
} 
function mapStateToProps({ overview }) { 
    return { overview }; 
} 
export default connect(mapStateToProps)(Overview); 

Aktion Schöpfer:

import { FETCH_OVERVIEW } from './types'; 

export function updateOverview(data) { 
    return { type: FETCH_OVERVIEW, payload: data }; 
} 

Minderer index.js

import { combineReducers } from 'redux'; 
import overviewReducer from './overviewReducer'; 

export default combineReducers({ 
    overview: overviewReducer 
}); 

overviewReducer.js

import { FETCH_OVERVIEW } from '../actions/types'; 
export default function(state = null, action) { 
    switch (action.type) { 
    case FETCH_OVERVIEW: 
     return action.payload; 
    default: 
     return state; 
    } 
} 

Answer 1

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

Ihre Header Komponente bereits weiß, wie Aktion zu erstellen. In Anbetracht der Home Komponente benötigen Sie nicht bindActionCreators.

Der richtige Weg, dies zu tun.

const mapDispatchToProps = dispatch => { 
    return { 
     callUpdateOverview:() => { 
      dispatch({ updateOverview }); 
     } 
    } 
} 

Und im Header Render-Methode:

this.props.updateOverview(res.data); 

EDIT:

In Ihrem Home Component render Methode,

 const homeThis = this; //save `this` object to some variables 
     ^^^^^^^^^^^^^^^^^^^^^^ 

     const options = { 
      baseUrl: .., 
      chooseAndUpload: .., 
      uploadSuccess: function (res) { 
       homeThis.props.callUpdateOverview();// call using `homeThis`   
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
      } 
     }; 

Answer 2

In Ihrem Code, rufen Sie

updateOverview(res.data); 

tatsächlich, die wie, um die aufgerufen werden soll

this.props.updateOverview(res.data); 

Denn nur die redux hören versenden gebundene Aktionen, um dies zu ermöglichen, verwenden wir connect Funktion von react-redux Paket, so dass redux wissen wird aktualisiert sich bei der Ausführung der Aktion.

connect Ihre Wirkung auf die Komponente Requisiten auf this.props binden, so ist es sehr wichtig this.props.action() zu verwenden und nicht nur action()