为什么 React Redux 在发生火灾时分派两次

Question

国家

追踪结果

每次单击按钮时，dispatch运行两次，如上图。

这是AppBar组件和mapDispatchToProps功能。

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;

这是减速机

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;

这是 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;

所有库都很好地导入。我试过 remove redux-thunk，结果还是一样。

提前致谢。

参考

• React-Redux Counter 示例动作触发两次 我在 stackoverflow 上查看了这个问题，并尝试了答案，但没有一个解决它。