javascript - 将 mapDispatchToProps 定义为函数时，Redux 操作不再起作用

Question

在容器中，我一直在使用“对象速记”形式在事件处理程序中mapDispatchToProps提供单个 redux 操作（初始化为createRoutinefrom ）：redux-actions

const mapDispatchToProps = {
  validateAddress,
}

在处理程序中，操作以这种形式出现：

function () { return dispatch(actionCreator.apply(this, arguments));}

都好。但是当我定义mapDispatchToProps为一个函数时，我可以添加其他需要访问的操作dispatch，就像这样......

const mapDispatchToProps = (dispatch) => {
  return {
      validateAddress: () => dispatch(validateAddress()),
      newAction1: .......,
      newAction2: .......,
  }
}

...我原来的动作 ,validateAddress停止工作，现在以这种形式出现：

function validateAddress() {
  return dispatch(Object(_core_address_module__WEBPACK_IMPORTED_MODULE_9__["validateAddress"])());
}

我不确定为什么会发生这种情况或如何恢复我原始操作的功能。有任何想法吗？谢谢。

Answer 1

您的动作创建者validateAddress应该返回一个对象或函数，该对象或函数接收用于 thunk 动作的 dispatch 和 getState 函数。

这是一个工作示例：

const { Provider } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;

const initialState = {
  validateAddress: 0,
};
//action types
const VALIDATE_ADDRESS = 'VALIDATE_ADDRESS';
//action creators
function validateAddress() {
  return { type: VALIDATE_ADDRESS };
}
const reducer = (state, { type }) => {
  if (type === VALIDATE_ADDRESS) {
    return {
      ...state,
      validateAddress: state.validateAddress + 1,
    };
  }
  return state;
};
//selectors
const selectValidateAddress = (state) =>
  state.validateAddress;
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware(() => (next) => (action) =>
      next(action)
    )
  )
);
const App = ({ validateAddress, actionCalled }) => {
  return (
    <button onClick={validateAddress}>
      call action, called {actionCalled} times
    </button>
  );
};
const mapDispatchToProps = (dispatch) => {
  return {
    validateAddress: () => dispatch(validateAddress()),
  };
};
const mapStateToProps = (state) => ({
  actionCalled: selectValidateAddress(state),
});
const AppContainer = ReactRedux.connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>