score:1

Accepted answer

what is dispatch in your actionsformatter? it is defined neither on actionsformatter scope nor on out of actionsformatter scope. that's the problem and that's the javascript interpreter talking you about.

one of the possible fix is to import you redux store

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
    // ...
};

this way you'll get dispatch available in actionsformatter body.


another way is to provide mapped method via connect -> environmentlist -> actionsformatter chain. do what arnaud christ suggested in his reply and then refactor the code:

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)
} ];

so, the connected environmentlist got necessary removeenvironment method on it's props. then we passes it to columns creator, which passed it to actionsformatter creator.

score:1

you have to link your component with the dispatch method.

as you are already using react-redux to connect your component to your redux store, you can easily do that through mapping dispatch to props.

just add the following:

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

const mapdispatchtoprops = dispatch => {
    return {
        removeenvironnement: id => {
             dispatch(removeenvironnement({ id }));
        }
    }
}

export default connect(mapstatetoprops, mapdispatchtoprops)(environnementlist);

and then in your onclick handler, just call this.props.removeenvironnement(id)


Related Query

More Query from same tag