> For the complete documentation index, see [llms.txt](https://refract.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://refract.js.org/examples/redux-fetch.md).

# Redux fetch

## Redux Fetch

| callbag                                                                                                                               | most                                                                                                                               | RxJS                                                                                                                               | xstream                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| [`code`](https://git.io/fAZ1d) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/redux-fetch/callbag) | [`code`](https://git.io/fAZ1F) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/redux-fetch/most) | [`code`](https://git.io/fAZ1b) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/redux-fetch/rxjs) | [`code`](https://git.io/fAZ1A) [`live`](https://codesandbox.io/s/github/fanduel-oss/refract/tree/master/examples/redux-fetch/xstream) |

This basic example renders a single text input which prompts for a GitHub username. When the user submits the form (either by clicking the button or pressing return), it dispatches a plain action to Redux.

### Aperture

Inside the Refract `aperture`, two observables are observed: the `USER_REQUEST` action, and the `getUsers` selector. Every time an action with the type `USER_REQUEST` is dispatched to the store, it is passed to the stream; every time the `users` object in the redux store changes, it is also passed to the stream.

These two streams are combined into one `combined$` - each time anything is sent to either stream, this new stream emits a new tuple containing the most recent value from *both* source streams.

This combined stream is piped through various methods in two separate control flows: requests for users whose data is not yet in redux are mapped to a fetch request, with error handling built in; requests for users whose data *is* already in the store are mapped to a `selectUser` action.

### Handler

The Refract `handler` inspects the type of each effect, and causes different effects for different action types. If the effect is an error, it logs the effect; if the effect is either a `USER_RECEIVE` or a `USER_SELECT` effect, it is dispatched to the store.

### Result

The end result is a form with some complex conditional, asynchronous logic built in an easily maintainable way.