React路由器链接ONCLICK REDUX ACTION CALL不要调用还原器

Question

使用React路由器的链接标签在更新新的状态数据并在展示新组件中渲染之前，在'onClick'上传递操作。没有调用还原或对状态进行任何更改。不知道为什么。任何帮助将不胜感激。

还没有记录"还原器工作"的还原器。在主屏幕日志上的还原器，称为'

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

带有开火的容器

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包装中的CC_1函数，以便Redux知道在执行操作时更新自动。

connect将您的动作绑定到this.props上的组件道具，因此使用this.props.action()非常重要，而不仅仅是action()

BindActionCreators的唯一用例是您要将某些动作创建者传递到不知道Redux的组件，并且您不想将Dispatch或Redux Store传递给它。