Действие Redux больше не работает при определении mapDispatchToProps как функции - PullRequest
Новая
       125

Действие Redux больше не работает при определении mapDispatchToProps как функции

0 голосов
/ 03 августа 2020

В контейнере я использовал сокращенную форму объекта mapDispatchToProps, чтобы сделать доступным одно действие redux (инициализированное как createRoutine из 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"])());
}

Я не уверен, почему это происходит или как восстановить функциональность моего исходного действия. Любые идеи? Спасибо.

1 Ответ

0 голосов
/ 03 августа 2020

Создатели ваших действий, такие как validateAddress, должны возвращать объект или функцию, которая получает функции 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>
...