How does it work?

This page briefly talks about how the configuration you pass is mapped to 2 properties, a function to trigger the fetch, and an object containing the response. You can find the example also on codesandbox.

FetchConfig

You write data source declarations in a fetchConfig array.

This is the minimal configuration to make 1 call:

const fetchConfig = [
  {
    resource: 'photos',
    request: {
      url: '//jsonplaceholder.typicode.com/albums/1/photos',
    },
  },
];

You can read more about all the options in the fetchConfig API docs.

This fetchConfig array is passed to the reduxFetch HoC, or the <ReduxFetch /> component as follows:

  1. HoC: reduxFetch(fetchConfig)(MyComponent)
  2. Render prop: <ReduxFetch config={fetchConfig}>{() => { /* ... */ }}</ReduxFetch>

React Redux Fetch takes this configuration, and provides 2 things back as props:

1. A function to make the actual request.

  • From the example above, that would be dispatchPhotosGet. This function name consists of 3 parts:

    • dispatch: to indicate that by calling this function a redux action is dispatched
    • [resourceName]: the name of the resource declared in the config
    • [method]: The method of the request (Get/Delete/Post/Put)

2. An object containing the promise state with response

  • From the example above, that would be photosFetch. This object has the following properties:

    • pending, fulfilled, rejected: Promise flags
    • value: The actual response body
    • meta: The actual response object

Actions dispatched

Request

When calling this.props.dispatchPhotosGet();, react-redux-fetch dispatches the action react-redux-fetch/GET_REQUEST:

react-redux-fetch/GET_REQUEST

The action creates a new state tree "photos", inside the repository state tree:

react-redux-fetch/GET_REQUEST

The react-redux-fetch middleware takes this action and builds the request with Fetch API. This part of the state is passed as a prop to the AlbumPhotos component:

react-redux-fetch/GET_REQUEST

Fulfil

When the request fulfills (i.e. receiving a status code between 200 and 300), react-redux-fetch dispatches the action react-redux-fetch/GET_FULFIL:

react-redux-fetch/GET_REQUEST

With updated state tree:

react-redux-fetch/GET_REQUEST

This part of the state is passed as a prop to the AlbumPhotos component:

react-redux-fetch/GET_REQUEST

Reject

Similarly, when the request fails, react-redux-fetch dispatches the action react-redux-fetch/GET_REJECT:

react-redux-fetch/GET_REQUEST

← PreviousNext →