Как приковывать действия в Redux и реагировать?

I am new to React, Redux and JS overall. Я хочу знать, как я могу связывать действия в компоненте? На экране листинга мое приложение получает геопозицию пользователя, а затем получает url api с текущим long и lat.

Я сделал это с тайм-аут. Но я вижу, что это рискованный путь.

import {
  aFetch,
  aGetPosition,
} from '../../actions';

import { API_URL } from '../../config/ApiEndpoints';

class App extends Component {
  componentDidMount() {
    this.props.aGetPosition();
    setTimeout(() => {
      const { latitude, longitude } = this.props.position.data.coords;
      const url = `${API_URL}=${latitude},${longitude}`;

      this.props.aFetch(url);
    }, 1000);
  }

  render(){...}
}

const mapStateToProps = (state) => {
  return {
    position: state.position,
    items: state.items,
  };
};

export default connect(mapStateToProps, { aFetch, aGetPosition })(App);

Возможно сделать его используя .тогда () или что-то равное?

2 ответа

  1. Во-первых, вы захотите отправить свои действия redux. Это возможно при использовании mapDispatchToPropsфункции, которая будет 2-м параметром в вашей connectфункции (вместо простого объекта с вашими действиями, который у вас есть сейчас). Документы по реализации redux в контейнерах React, включая диспетчеризацию действий из контейнера: http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

    Для обработки асинхронных и цепных действий, вероятно, потребуется использовать промежуточное программное обеспечение, например redux-thunk. Doc link: http://redux.js.org/docs/advanced/AsyncActions.html#async-action-creators (я рекомендую прочитать всю эту страницу, но ссылка будет идти непосредственно в раздел для redux-thunk).