Usage With React

It is not a requirement you should use React to use Redux Resource, but the two work well together. We recommend using the react-redux library to link Redux with React.

The following are some patterns that we find ourselves using frequently with Redux Resource.

Using mapStateToProps

We recommend placing your calls to getResources and getStatus within mapStateToProps. That way, you can access this information from any of the component's lifecycle methods, without needing to compute them within each method.

For example:

import { getResources, getStatus } from 'redux-resource';

function mapStateToProps(state) {
  const searchedBooks = getResources(state.books, 'searchResults');
  const searchStatus = getStatus(state, 'books.requests.getSearchResults.status');

  return {
    searchedBooks,
    searchStatus
  };
}

Type Checking with Prop Types

Redux Resource Prop Types exports a number of helpful prop types for common props that you'll pass into your React Components. Read the Redux Resource Prop Types documentation for more.

Using Request Statuses

This is such an important topic that there is a dedicated guide for it.

Determining When a Request Succeeds

Sometimes, you want to know the exact moment that a request succeeds. You can do this within your components by comparing the previous state with the next state to determine when a request changes from one status to another.

We recommend performing this check within componentDidUpdate. This might look like:

import { getResources, getStatus } from 'redux-resource';

class BooksList extends Component {
  render() {
    // Render contents here
  }

  // Let's log to the console whenever a search result succeeds
  componentDidUpdate(prevProps) {
    if (this.props.searchStatus.succeeded && prevProps.searchStatus.pending) {
      console.log('The search request just succeeded.');
    }
  }
}


function mapStateToProps(state) {
  const searchStatus = getStatus(state, 'books.requests.getSearchResults.status');

  return {
    searchStatus
  };
}

This same approach can also be used to detect the moment that a request fails.