Redux, соединяющий отправку с реквизитом - PullRequest
Новая
       16

Redux, соединяющий отправку с реквизитом

0 голосов
/ 18 апреля 2019

У меня есть приложение React, подключенное к Redux.

У меня есть создатель действий, который я использую для извлечения данных настройки.

В самом верху моего компонента с состоянием я импортирую его так: 

import { fetchSetup } from "../../store/actionCreators";

Это действительная функция fetchSetup (): 

export const fetchSetup = (clientID = 1) => async dispatch => {
  const clientIDObj = {
    user_id: clientID
  };
  await fetch(`${apiURLs.setup}`, {
    method: "post",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(clientIDObj)
  })
    .then(response => {
      return response.json();
    })
    .then(json => {
      console.log("fetchSetup()", json);
      dispatch({ type: actionTypes.FETCH_SETUP, payload: json });
    });
};

Когда я подключаю его к магазину Redux, как показано ниже, все прекрасно работает: 

export default connect(
  mapStateToProps,
  { fetchSetup }
)(withRouter(Landing));

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

const mapDispatchToProps = dispatch => {
  return {
    onUnauthenticated: () => dispatch({ type: actionTypes.UNAUTHENTICATED }),
    fetchSetupData: fetchSetup()
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Landing));

Несмотря на то, что ошибок нет, кажется, просто никогда не выполняется мой создатель действий. Я никогда не вижу никаких действий, отправляемых в моих инструментах разработки Redux, и я не вижу никаких console.logs из функции создателя действий.

Как я могу подключить своего создателя действий таким образом, чтобы я также мог подключить другие функции, и они все работают?

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Существует несколько способов использования mapDispatchToProps. Единственный способ, который работает для вас, - это метод предоставления object как mapDispatchToProps, который выполняет внутреннюю редукцию, а затем отправляет.

Второй способ, который не работает для вас, должен иметь функцию, которая отправляется, а не просто вызывается 

const mapDispatchToProps = dispatch => {
  return {
    onUnauthenticated: () => dispatch({ type: actionTypes.UNAUTHENTICATED }),
    fetchSetupData: () => dispatch(fetchSetup())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Landing));
0 голосов
/ 18 апреля 2019

Ваша проблема здесь: 

fetchSetupData: fetchSetup()

вам нужно использовать 

fetchSetupData: () => { fetchSetup(dispatch); }
...