Warning: setState(…): Cannot update during an existing state transition in react redux

Question

I have always get a warning when i click the button. I search it, they use bind to remove the warning but how can I add it to react redux in my code the bind function?

import * as React from 'react';
import {connect} from 'react-redux';
import {toggleModal} from '../../actions/ModalActions';

interface Props {
    show?: boolean;
    onSelectedSample: (value: boolean) => void;
}

const SampleList = ({show, onSelectedSample}: Props) => {

  return (
     <div>
        <a  className='button link info' onClick={() => onSelectedSample(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
        <a  className='button link info' onClick={() => onSelectedSample(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
        <a  className='button link info' onClick={() => onSelectedSample(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
      </div>
    );
});


const mapStateToProps = (state, props) => {
    return {
        show: state.modalReducer.show,
    };
};

const mapDispatchToProps = (dispatch, props) => {
    return {
        onSelectedSample: (toggle: boolean){
            dispatch(toggleModal(toggle));
        },
    };
};

const ListSampleContainer = connect(mapStateToProps, mapDispatchToProps)(SampleList);
export default ListSampleContainer;

It's hard if in redux code. I don't have any idea how to handle this in redux.

Update

Actions folder

import {ModalActions} from '../constants/ModalConstants';

export const toggleModal = (show?: boolean) => {
    return {
        type: ModalActions.TOGGLE_MODAL,
        show,
    };
};

Reducer folder

import {ModalActions} from '../constants/ModalConstants';

interface State {
    show: boolean;
}

const initState = {show: false};

export const modalReducer = (state: State = initState, action) => {
    switch (action.type) {
        case ModalActions.TOGGLE_MODAL:
            if (action.show) {
                return {show: action.show};
            } else {
                return {show: !state.show};
            }

        case ModalActions.HIDE_MODAL:
            return {show: false};
    }
    return state;
};

If I have only one button. I don't have a warning but if more button added. That will happen

Answer 1

Maybe when you click one anchor, the others get clicked somehow because they are interleaving. Just to eliminate this possibility, try using different onClick handlers for the different anchors and see if you still have the error. Make every one of them log a different output to the console for example instead of dispatching your action. Then we'll know for sure.

<a  className='button link info' onClick={() => onSelectedSample1(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
<a  className='button link info' onClick={() => onSelectedSample2(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
<a  className='button link info' onClick={() => onSelectedSample3(!show)}><i className='fa fa-user-plus fa-fw'></i></a>