React - Redux dispatcher not mapping

Question

I have a several react components in react-redux application. Most of them are working find, but the below "TagItemWidget" does not appear to bind the state or dispatchers to props. I have confirmed that the dispatch function works and fires the reducer. The same function and state can be bound on other components. I have done a trace and observed that the bind function is firing. However, in both "console.log" outputs, props is empty. componentDidMount and render appear to be called only once, when the page loads - never again. What gives?

UPDATE: If I move my <TagItemWidget /> into the spot where <TagItemButton /> is, it populates the dispatchers. Is there a problem with my 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);

The including component, 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
                })
            })
    }
}

Daniel Duong Daniel Duong · Accepted Answer · 2020-05-01T03:01:22

If you are using redux-thunk. Which I think you are. dispatch needs to be spread from the thunk like so export const tags_list = ( case_id ) => ({ dispatch }) => {

You need to bindActionCreators either before passing them to the connect function

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

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

inside the constructor https://redux.js.org/api/bindactioncreators

React - Redux dispatcher not mapping

1 Answers