理解 redux 中的 mapDispatchToProps

Question

我希望我的代码监听选择（在列表页面上），然后通过从另一个页面上的节点服务器获取数据来显示数据

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)

我对服务器进行 axios 调用，然后我想调度操作以设置我的减速器的状态，然后我将尝试将其重定向到其他页面 他们还有其他方式吗 或者 我需要 1) 将 axios 的数据提供给调度员 2) 之后的重定向方式

请帮忙

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 );

您应该考虑编写更简洁的代码，这样会更容易为您提供帮助。