React-Redux Counter 示例 Action 触发两次

Question

https://codesandbox.io/s/jvj6o043yv

我正在尝试使用非常简单的 Counter 示例来了解 react-redux connect、Provider 和 mapStateToProps 和 MapDispatchToProps 的基础知识。练习的重点是将 Prop 和 Action 注入(inject)到 Counter 组件中。

我看到的问题是每次单击按钮时我的操作都会触发两次。我是 Redux 菜鸟，所以我确信(我希望)这是一个相当基本的错误。我会很感激任何指出我出错的地方。提前致谢。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { connect } from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';


// Reducer
const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// store setup
const configureStore = () => {
  const middlewares = [];
  if (process.env.NODE_ENV !== 'production') {
    middlewares.push(createLogger());
  }
  return createStore(
    counter,
    applyMiddleware(...middlewares)
  );
};
const store = configureStore();

// functional component
let Counter = ({
  currCounter,
  onIncrement,
  onDecrement
}) => (
  <div>
    <h1>{currCounter}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
);

// Connect logic
const mapStateToProps = (state) => ({
  currCounter: state
})
const mapDispatchToProps = {
  onIncrement: () =>
    store.dispatch({
      type: 'INCREMENT'
    }),
  onDecrement: () =>
    store.dispatch({
      type: 'DECREMENT'
    }),
}
Counter = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

// Entry point
const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <Counter />
    </Provider>,
    document.getElementById('root')
  );
};

store.subscribe(render);
render();

Answer 1

您收到重复调度的原因是因为您编写 mapDispatchToProps 的方式对象(以及看似无辜的双箭头语法的使用)。

不带大括号的双箭头语法，如 () => value , 转换为 function { return value } .

因此，onIncrement实际上不是一个看起来像 { store.dispatch(...) } 的函数不再是 - 它实际上是调度调用的返回值。在这种情况下，这只是调度的 Action 。

如果我们写 onIncrement看起来像这样(它只返回 Action 对象):

onIncrement: () => {
    return {
      type: "INCREMENT"
    }
}

我们最终在按钮按下时得到了正确调度的操作。

这导致您的双重 dispatch - onIncrement第一次调用 store.dispatch然后从返回的对象中旋转另一个调度。

无论如何，您可以通过在 onIncrement() 中添加大括号来解决这个问题。 :

onIncrement: () => {
    store.dispatch({
      type: 'INCREMENT'
    });
},

您也可以只返回操作对象，如前所示。