Реагировать - Redux диспетчер не отображает

Question

У меня есть несколько реактивных компонентов в реактивно-избыточном приложении. Большинство из них работают find, но приведенный ниже «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;

action / 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
                })
            })
    }
}

Answer 1

Если вы используете redux-thunk. Который я думаю, что ты. диспетчеризацию нужно распространять из thunk следующим образом: export const tags_list = ( case_id ) => ({ dispatch }) => {

Вам необходимо связать bindActionCreators перед передачей их в функцию connect

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

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

внутри конструктора https://redux.js.org/api/bindactioncreators