Реакция отправки не определена удалить действие

Question

У меня проблема с моим ActionsFormatter.

Когда я нажимаю кнопку УДАЛИТЬ, я получаю сообщение об ошибке:

Uncaught ReferenceError: отправка не определена при onClick

Как я мог решить эту проблему?

import { removeEnvironnement } from '../../actions/environnement';
const EnvironnementList = (props) => (

            <BootstrapTable 
                keyField='id' 
                data={ props.store.environnements } 
                columns={ columns }
                selectRow={selectRow} 
                pagination={ paginationFactory() } 
                filter={ filterFactory() } 
                striped hover condensed
              />
);

const actionsFormatter  = (cell, row) => {
    const id=row.id
    return (
            <button className="btn btn-danger" 
                onClick={() => {
                     dispatch(removeEnvironnement({ id }));}}
            >Delete</button>
    );
};

const columns = [{
    dataField: 'id',
    text: 'ID'
}, {
    dataField: 'nom',
    text: 'Nom',
    filter: textFilter()
}, {
    dataField: 'actions',
    text: 'Action',
    formatter: actionsFormatter
} ];


const selectRow = {
    mode: 'checkbox',
    clickToSelect: true,
    bgColor: '#00BFFF'
};


const mapStateToProps = (state) => {
    return {
        store: state
    };
}

export default connect(mapStateToProps)(EnvironnementList);

Вот мой код для удаления: Я должен удалить часть отправки?

const _removeEnvironnement = ({ id } = {}) => ({
    type: 'REMOVE_ENVIRONNEMENT',
    id
});

export const removeEnvironnement = ({ id } = {}) => {
    return (dispatch) => {
        return axios.delete(`environnements/${id}`).then(() => {
            dispatch(_removeEnvironnement({ id }));
        })
    }
};

Answer 1

Что такое dispatch в вашем actionsFormatter? Он не определен ни в области действия actionsFormatter, ни в области действия actionsFormatter. Это проблема, о которой говорит вам интерпретатор javascript.

Одним из возможных исправлений является импорт в магазин приставок

store.js

export const store = createStore(...)

EnvironmentList.js

import { store } from './path/to/store.js'

// ...

const actionsFormatter  = (cell, row) => {
    const { dispatch } = store
    const id = row.id
    // ...
};

Таким образом, вы получите dispatch доступный в actionsFormatter теле.

---

Другим способом является предоставление сопоставленного метода через цепочку connect -> EnvironmentList -> actionsFormatter. Сделайте то, что Арно Христос предложил в своем ответе , а затем рефакторинг кода:

const EnvironmentList = (props) => (

            <BootstrapTable 
                keyField='id' 
                data={ props.store.environnements } 
                columns={ columns(props.removeEnvironment) }
                selectRow={selectRow} 
                pagination={ paginationFactory() } 
                filter={ filterFactory() } 
                striped hover condensed
              />
);

const actionsFormatter = (removeEnvironment) => (cell, row) => {
    const id=row.id
    return (
            <button className="btn btn-danger" 
                onClick={() => {
                     removeEnvironment({ id });
                }}
            >Delete</button>
    );
};

const columns = (removeEnvironment) => [{
    dataField: 'id',
    text: 'ID'
}, {
    dataField: 'nom',
    text: 'Nom',
    filter: textFilter()
}, {
    dataField: 'actions',
    text: 'Action',
    formatter: actionsFormatter(removeEnvironment)
} ];

Итак, подключенный EnvironmentList получил необходимый метод removeEnvironment для своих реквизитов. Затем мы передаем его создателю столбцов, который передал его создателю actionsFormatter.

Answer 2

Вы должны связать свой компонент с помощью метода dispatch.

Поскольку вы уже используете react-redux для подключения вашего компонента к вашему Redux-хранилищу, вы можете легко сделать это путем сопоставления dispatch сprops.

Просто добавьте следующее:

const mapStateToProps = (state) => {
    return {
        store: state
    };
}

const mapDispatchToProps = dispatch => {
    return {
        removeEnvironnement: id => {
             dispatch(removeEnvironnement({ id }));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(EnvironnementList);

А затем в своем обработчике onClick просто вызовите this.props.removeEnvironnement(id)