Redux Reagieren - this.props.actions.fetchPosts ist keine Funktion

Question

ich habe Problem mit Asynchron-Aktion von meiner Komponente Aufruf, ich glaube, ich tat alles, was nötig war, scheint zu funktionieren, aber ich mag nicht, ich verwendet:

mapDispatchToProps

und innen i Rückkehr

Aktionen: bindActionCreators (fetchPosts, Versand)

und ich schließe es an.

Nach all diesen Dingen, ich versuche, diese Aktion in meiner Komponente zu nennen -

this.props.actions.fetchPosts()

in Folge bekomme ich diesen Fehler in der Konsole -

this.props.actions.fetchPosts ist keine Funktion

und ich kann nicht verstehen, was das Problem mit ihm ist, wie ich alles getan, hier wird die volle Quelle sein:

Komponente

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import styles from './Home.css'; 
import { fetchPosts } from '../actions/counter'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 


    class Home extends Component { 

     constructor(props) { 
      super(props) 
     } 
     render() { 
       return (
         <div> 
          <div className="container"> 
           <div className="banner_animated"> 
            <p> dadasda</p> 
           </div> 
          </div> 
          <div className="container-fluid"> 
           <div className="center"> 
            <input type="text"/> 
            <button className="btn-2 btn-2a btn" onClick={this.props.actions.fetchPosts()}>Button</button> 
           </div> 
          </div> 

         </div> 
       ); 
     } 
} 
function mapStateToProps(state) { 
     return state 
} 
function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(fetchPosts, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Home); 

Aktion

import { FETCHING_WIN_RATES, FETCHED_WIN_RATES } from '../const'; 
import { firebaseDb } from './firebase'; 

const ref = firebaseDb.ref("win_rate"); 

    function fetchingWinRates() { 
     return { 
       type: FETCHING_WIN_RATES 
     }; 
} 

    function fetchedWinRates(winRates) { 
     return { 
       type: FETCHED_WIN_RATES, 
       winRates 
     }; 
} 
// win rate champions 
export function fetchPosts() { 
     return dispatch => { 
       dispatch(fetchingWinRates()); 
       ref.on("value", function(snapshot) { 
         dispatch(fetchedWinRates(snapshot)); 
         console.log(snapshot.val()); 
       }, function (errorObject) { 
         console.log("The read failed: " + errorObject.code); 
       }); 
     } 
} 

schreiben Wenn du noch mehr Dateien brauchst, danke.

Answer 1

Wenn Sie eine Funktion bindActionCreators passieren, wird es eine Funktion zurück. Siehe die Dokumentation für bindActionCreators hier (in Returns Abschnitt): http://redux.js.org/docs/api/bindActionCreators.html.

Sie ordnen hier effektiv this.props.action = fetchPosts zu, was bedeutet, dass Sie fetchPosts wie folgt aufrufen würden: this.props.action().

Wenn Sie über this.props.actions.fetchPosts zugreifen möchten, müssen Sie Folgendes tun:

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators({ fetchPosts }, dispatch) 
    }; 
} 

Beachten Sie die Kurz { fetchPosts } die die gleiche wie { fetchPosts: fetchPosts } ist.

Answer 2

Sie brauchen nicht bindActionCreators zu verwenden http://redux.js.org/docs/api/bindActionCreators.html

const mapDispatchToProps = dispatch => ({ 
    onClick:() => dispatch(fetchPosts(id)) 
    }) 
} 

und dann den Zugriff über this.props.onClick