React Router Link onClick redux动作调用不调用reducer

Question

在更新新状态数据并在显示的新组件中呈现之前，使用react路由器的Link标记在'onClick'上传递操作。不调用Reducer或对状态进行任何更改。不知道为什么。任何帮助将不胜感激。

不记录'减速机工作'的减速机。在主屏幕日志的减速机名为'

import GATHER_NEIGHBOURS from '../actions';
import GATHER_REGION from '../actions';
import GATHER_ALL from '../actions';

import _ from 'lodash';


const displayData = (state = {}, action) => {
    console.log("reducer called!");
    switch (action.type) {
        case 'GATHER_NEIGHBOURS':
            console.log("reducer working!");
            return { display: 'neighbours' };
        case 'GATHER_REGION':
            return {};
        case 'GATHER_ALL':
            return {};
  }
  return state;
};

export default displayData;

记录'工作'

的操作

export const GATHER_NEIGHBOURS = "GATHER_NEIGHBOURS";

export function importNeighbourData (data) {
    console.log('action working');
    return {
        type: GATHER_NEIGHBOURS,
        payload: data
    };
}

带有onClick的容器

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { importNeighbourData, importRegionData, importAllData } from '../actions';


class HomeMenu extends Component {
    constructor(props){
        super(props);
        this.handleClick50 =this.handleClick50.bind(this);
        this.handleClick200 =this.handleClick200.bind(this);
        this.handleClickAll =this.handleClickAll.bind(this);
    }

    handleClick50(e) {
        console.log('click called');
        importNeighbourData(this.props.planets);
    }

    handleClick200(e) {
        importRegionData(this.props.planets);
    }

    handleClickAll(e) {
        importAllData(this.props.planets);
    }

    render(){
        return (
            <div className="homeMenu">
                <div>
                    <Link to="/browse" onClick={this.handleClick50}>
                        <img alt="earth-and-moon-icon" src="imgs/earth-and-moon.png"></img> 
                        Neighbourhood<br/>
                        (less than 50 parsecs)
                    </Link>
                </div>
                <div>
                    <Link to="/browse" onClick={this.handleClick200}>
                        <img alt="solar-system-icon" src="imgs/solar-system.png"></img> 
                        Regional<br/>
                        (less than 200 parsecs)
                    </Link>
                </div>
                <div>
                    <Link to="/browse" onClick={this.props.handleClickAll}>
                        <img alt="galaxy-icon" src="imgs/galaxy-view.png"></img> 
                        All
                    </Link>
                </div>
            </div>
        );
    }
}

function mapStateToProps({ planets }, ownProps) {
    return { planets };
}

function mapDispatchToProps(dispatch, ownProps) {
    return bindActionCreators({importNeighbourData, importRegionData, importAllData}, dispatch);
}

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

Answer 1

在您的代码中，您正在调用

importNeighbourData();
importRegionData();
importAllData();

实际应该被称为，

this.props.importNeighbourData();
this.props.importRegionData();
this.props.importAllData();

因为，redux只会监听分派绑定的动作，所以要启用它，我们使用connect包中的react-redux函数，这样redux就会知道在动作执行时自行更新。

connect会将您的操作绑定到this.props上的组件道具，因此使用this.props.action()而非action()

非常重要

  

bindActionCreators的唯一用例是当你想将一些动作创建者传递给一个不知道Redux的组件时，你不想将dispatch或Redux存储传递给它。