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

Question

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

不记录的 Reducer 'reducer working'。在主屏幕上记录 '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;

记录的操作 'working'

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

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

是非常必要的

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

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

React Router Link onClick redux action call not calling reducer

javascript

reducers

reactjs

react-router

react-redux

不记录的 Reducer 'reducer working'。在主屏幕上记录 'reducer called'

记录的操作 'working'

带有触发的 onClick 的容器