# External Request

### Create a sink with effect to handle the external request

This is an example of using the effect to handle HTTP requests, using an async function

{% code title="WeatherSink.js" %}

```javascript
import { sink, state, effect } from 'redux-sink';

@sink('weather')
export class WeatherSink {
  @state loading = false;
  @state weather = { 
    temperature: 0,
    humidity: 0
  };

  @effect
  async function loadWeather() {
    this.loading = true;
    // using async/await here, same for promise
    this.weather = await fetch('http://api/weather');
    this.loading = false; 
  }
}
```

{% endcode %}

### Call effect load data in a component

{% code title="Weather.jsx" %}

```jsx
import * as React from 'react';
import { sinking } from 'redux-sink';
import { WeatherSink } from './WeatherSink';

export class Weather extends React.Component {
  componentWillMount() {
    // the prop name of sink will be `weather`, because @sink('weather')
    const { weather } = this.props;
    weather.loadWeather();
  }

  render() {
    const { weather } = this.props;
    return (
      <div>
        { !weather.loading &&
          <>
            <div>temperature: {weather.weather.temperature}</div>
            <div>humidity: {weather.weather.humidity}</div>
          </>
        }
      </div>
    );
  }
}

export default sinking(WeatherSink)(Weather);
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jiaronggu.gitbook.io/redux-sink/examples/external-request.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.