React - Redux 调度程序未映射答案

【问题标题】：React - Redux dispatcher not mappingReact - Redux 调度程序未映射
【发布时间】：2020-04-30 23:17:40
【问题描述】：

我在 react-redux 应用程序中有几个反应组件。他们中的大多数都在寻找，但下面的“TagItemWidget”似乎没有将状态或调度程序绑定到道具。我已经确认调度功能可以工作并触发减速器。相同的功能和状态可以绑定在其他组件上。我进行了跟踪并观察到绑定函数正在触发。但是，在两个“console.log”输出中，props 都是空的。当页面加载时，componentDidMount 和 render 似乎只被调用一次 - 再也不会。什么给了？

更新：如果我将<TagItemWidget /> 移动到<TagItemButton /> 所在的位置，它会填充调度程序。我的 TagItemButton 有问题吗？

TagItemWidget：

import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { tags_list } from "../../actions/tags";

export class TagItemWidget extends React.Component {
    static propTypes = {
        cases: PropTypes.array.isRequired,
        activeCase: PropTypes.string
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this)
    }

    render() {
        console.log(this)
        return (
            <Fragment>
                <div key={Math.random} >
                    {this.props.activeCase}
                </div>
            </Fragment>
        )
    }
}

const mapStateToProps = (state) => ({
    cases: state.tags.tags,
    activeCase: state.cases.activeCase
});

export default connect(mapStateToProps, { tags_list })(TagItemWidget);

包含组件，TagItemButton：

import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { TagItemWidget } from './TagItemWidget';

export class TagItemButton extends Component {
    render() {     
        return (
            <Fragment>
                <a href="#" className="list-group-item list-group-item-action" id="controls_tagitem"
                    data-toggle="modal" data-target="#tagItemModal">
                    Tag Item
                </a>
                <div className="modal fade" id="tagItemModal" tabIndex="-1" 
                    role="dialog" aria-labelledby="tagItemModalLabel" 
                    aria-hidden="true">
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title" 
                                    id="tagItemModalLabel">
                                    Tag Item
                                </h5>
                                <button type="button" className="close" 
                                    data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">
                                <TagItemWidget />
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default TagItemButton;

actions/tags.js


import { TAGS_LIST } from "./types";
import { createMessage, returnErrors } from "./messages";

export const tags_list = ( case_id ) => dispatch => {
    if ( case_id != null ) {
        console.log("dispatging TAGS_LIST")
        axios
            .get("/OMNI_api/api/tag/listbycase/?case_id="+case_id)
            .then(response => {
                dispatch
                ({
                    type: TAGS_LIST,
                    payload: response.data
                })
            })
    }
}

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

如果你使用的是 redux-thunk。我认为你是。 dispatch 需要像这样从 thunk 传播 export const tags_list = ( case_id ) => ({ dispatch }) => {

你需要绑定ActionCreators 在将它们传递给connect 函数之前

const mapDispatch = (dispatch) => bindActionCreators({ tag_list }, dispatch);

export default connect(mapStateToProps, mapDispatch)(TagItemWidget);

在构造函数内部 https://redux.js.org/api/bindactioncreators

【讨论】：