когда я сопоставляю свое состояние притока с состоянием компонента, я получаю ошибку

Question

• когда вы нажимаете кнопку расширенного спортивного поиска, мне нужно отобразить ящик с моими значениями API.
• , но сейчас, когда я сопоставляю свое состояние притока с состоянием компонента, я получаю ошибку.Действия должны быть простыми объектами.Используйте пользовательское промежуточное программное обеспечение для асинхронных действий.
• Можете ли вы сказать мне, как отобразить мое состояние.
• , чтобы в будущем я мог самостоятельно решить все проблемы с избыточностью.
• фрагмент кода и песочница ниже.
• все мои состояния карты сделаны в tab-demo.js

https://codesandbox.io/s/rlpv50q8qo

getSportsPlayerHistory = values => {
    this.props.fetchHistorySportsDatafromURL();
  };

  toggleDrawer = (side, open) => () => {
    if (open === true) {
      this.getSportsPlayerHistory();
    }

    this.setState({
      [side]: open
    });
  };

  const mapDispatchToProps = dispatch => {
  return {
    onDeleteAllSPORTS: () => {
      // console.log("called");
      dispatch(deleteAllPosts());
    },
    addFavoriteSPORTSs: data => {
      dispatch(addFavoriteSPORTSs(data));
    },
    fetchHistorySportsDatafromURL: () => {
      dispatch(fetchHistorySportsDatafromURL());
    }
  };
};

Answer 1

Действия должны возвращать простые объекты, ваше действие fetchHistorySportsDatafromURL возвращает функцию.Если вы сделаете свою функцию редуктора истории async, то вы можете сделать асинхронную функцию, чтобы ваш вызов API был и возвращал результат в состояние.

Вызов API в редукторе

• Это работает, но не идеально, так как вы хотите, чтобы ваши редукторы были чистыми функциями, как, впрочем, без побочных эффектов, один и тот же ввод всегда производит то же самоеoutput

Вы также можете сделать запрос API в обработчике обратного вызова компонента асинхронно и передать результат отправленному действию.

Вызов API в компоненте затем отправляется в действии

• Это хорошее решение, которое отлично подходит для небольших проектов, но объединяет сетевую бизнес-логику с вашими компонентами отображения пользовательского интерфейса, что также не так идеально, поскольку снижает возможность повторного использования кода.

Если вы все еще хотите отделить свою логику API от вашего компонента (что хорошо), redux-thunk - это способ создания создателей асинхронных действий, которые яочень похоже на шаблон вашего исходного кода.

вызов API в действии с использованием redux-thunk

• Это наиболее идеальный вариант, поскольку он полностьюсвязывает бизнес-логику с вашим пользовательским интерфейсом, то есть вы можете изменять внутренние запросы, не касаясь внешнего интерфейса, и другие компоненты теперь могут использовать то же действие.Хороший СУХОЙ принципал.

Не совсем уверен, что вы хотите сделать с новым состоянием, но это должно привести вас к хорошему месту, чтобы справиться с этим в вашей функции mapStateToProps.