Verständnis mapDispatchToProps in redux

Question

ich mag mein Code die Wahl (auf Listenseite) hören und dann die Daten anzeigen, indem

import React from 'react' 
import {Link} from 'react-router-dom' 
import {connect} from 'react-redux' 
import {loadBickes} from './../../reducers/itemsGet.js' 
import axios from 'axios' 
class Hello extends React.Component{ 


constructor(props){ 
    super(props) 
    this.handleBick = this.handleBick.bind(this) 
} 

handleBick(){ 
    console.log("demanding bickes") 
    //loadBickes(); 
    axios.get('/getBike') 
     .then((response)=>{ 
     var dataP = response.data 
     console.log("data set") 
     console.log(response.data) 
     console.log("redy to b dispatched set") 
     {this.props.setState(response.data)} 
    // dispatch(setState(response.data)) 
    }) 
} 
//    <h4><Link to="Bike" onClick={this.props.Bike}>Bicycle</Link></h4> 

    render(){ 
     return(
      <div> 
       <h1>Items</h1> 

       <h4><button onClick={this.handleBick}>Bicycle</button></h4> 
       <h4><Link to="Calculator" onClick={this.props.Calculator}>Calculator</Link></h4> 
      </div> 
     ) 
    } 
} 

const mapStateToProps =(state)=>{ 
    console.log("state"+state.item.name) 
    return { 
     user : state.item 
    } 
} 

const mapDispatchToProps =(dispatch)=>{ 
return { 
    Bike :() => dispatch({ 
     type : "LOAD_BIKE" 
    }), 
    Calculator :() => dispatch({ 
     type : "LOAD_CALC" 
    }), 
     setState:(data)=>dispatch({ 
      type : "setData", 
      payload : data 
     }) 
    } 
} 

export default connect(mapStateToProps,mapDispatchToProps)(Hello) 

i axios Anruf-Server auf einer anderen Seite Daten vom Knotenserver bekommen machen und dann i Ich möchte versuchen, den Zustand meines Reduzierers zu senden, und dann werde ich versuchen, es auf andere Seite umzuleiten. ist ihre andere Art oder ich brauche 1) um Daten von Axios zu Dispatcher 2) Weg zu geben es nach

umleiten

Hilfe bitte

Answer 1

import React, { Component } from 'react' 
import {Link} from 'react-router-dom' 
import {connect} from 'react-redux' 
import {loadBickes} from './../../reducers/itemsGet.js' 
import axios from 'axios' 

class Hello extends Component { 

    constructor(props){ 
     super(props); 
     this.handleBick = this.handleBick.bind(this) 
    } 

    handleBick(){ 
     axios.get('/getBike').then((response) => { 
      let dataP = response.data; 
      this.props.setState(response.data); 
      this.props.history.push("/route_you_want_to_go_too"); 
     }); 
    } 

    render() { 
     return(
      <div> 
       <h1>Items</h1> 

       <h4> 
        <button onClick={this.handleBick}>Bicycle</button> 
       </h4> 

       <h4> 
        <Link to="Calculator" onClick={this.props.Calculator}>Calculator</Link> 
       </h4> 
      </div> 
     ) 
    } 
} 

const mapStateToProps = (state) => ({ 
     user : state.item 
}); 

const mapDispatchToProps = (dispatch) => ({ 
     Bike :() => dispatch({ 
      type : "LOAD_BIKE" 
     }), 
     Calculator :() => dispatch({ 
      type : "LOAD_CALC" 
     }), 
     setState:(data)=>dispatch({ 
      type : "setData", 
      payload : data 
     }) 
}); 

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

Sie sollten darüber nachdenken, daran zu arbeiten, sauberer Code zu schreiben, es wird es einfacher machen, Ihnen zu helfen.