Why React Redux dispatch twice when fire

Question

The State

The tracing results

Each time when I click the button, the dispatch run twice, like the picture above.

This is the AppBar component and mapDispatchToProps function.

const mapStateToProps = state => {
  return {
    title: state.title
  };
};
const mapDispatchToProps = {
  onClick: () => {
    return {
      type: "TOGGLE_SIDEBAR"
    };
  } 
};

const AppBar = props => (
  <Box>
    <Button icon={<Notification />} onClick={props.onClick} />
  </Box>
);
const AppBatContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(AppBar);
export default AppBatContainer;

This is the reducer

import {
  TOGGLE_SIDEBAR
} from "../constants/action-types";

const initialState = {
  showBar: false
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {

    case TOGGLE_SIDEBAR:
      return Object.assign({}, state, {
        showBar: !state.showBar
      });
    default:
      return state;
  }
};

export default rootReducer;

This is the store.js

import { createStore, applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk";
import rootReducer from "./reducers/index";

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        trace: true,
        traceLimit: 20
      })
    : compose;

const enhancer = composeEnhancers(applyMiddleware(reduxThunk));

const store = createStore(rootReducer, enhancer);

export default store;

All libraries are well imported. I tried remove redux-thunk, it is still the same result.

Thanks in advance.

Ref

• React-Redux Counter example action firing twice I have viewed this questions on stackoverflow, and tried the answers, but no of them solved it.