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

Question

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

不记录“减速器工作”的减速器。在主屏幕上记录“reducer called”

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 只会监听 dispatch 绑定的动作，所以为了启用它，我们使用 react-redux 包中的 connect 函数，这样 redux 就会知道在动作执行时更新自己。

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

bindActionCreators 的唯一用例是当您想要将一些操作创建者传递给不了解 Redux 的组件，并且您不想将调度或 Redux 存储传递给它时。