Javascript 火灾发生时，为什么要两次反应

国家

追踪结果

每次单击按钮时，

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;

这是

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;

所有库都可以很好地导入。我试着删除

redux thunk

，结果仍然是一样的

提前谢谢

裁判

• 我在stackoverflow上看到了这个问题，并尝试了答案，但没有人能解决它

  ---

尝试在增强器中添加跟踪功能

composeWithDevTools（{trace:true，traceLimit:20}）

这将让您知道您的操作从何处触发。在redux中的跟踪部分devtools@Prasanna非常感谢，这是个好主意。我试过了，正如你在更新的问题中所看到的，2封邮件，一封来自redux thunk，一封来自匿名函数。嗨@tim，你能分享你的

redux thunk

函数吗？嗨@jank，谢谢，事实上没有

redux thunk

函数，我还没有做任何不同步的事情。谢谢你的帮助，jank和Prasanna，我终于明白了。我的减速器功能不对。我应该把它改成

showBar:！动作。使用当前的道具值显示有效载荷中的

，我浏览了redux的文档，但我仍然没有理解为什么，因为我认为它仍然是一个纯函数，以这种方式显示

showBar:！state.showBar

，状态只是一个参数，不是吗？

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;