Usage With React

Like Redux itself, you don't need to use React with Redux Resource, but the two do work well together. We recommend using the react-redux library to handle using Redux with React.

If you're using react-redux, there are a few 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 for 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
  };
}

These methods are generally performant enough when used in this way. If you do see performance issues due to these calls, we recommend using reselect, which will further reduce the number of times that the values are computed. You probably don't won't need to do this, though – only do it if you're sure that you need to.

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 Statuses

The return value of getStatus is an object with four boolean values on it, representing each of the four request statuses. Because only one of those values is ever true, you can write expressive code in your render function to handle the different request statuses.

render() {
  const { searchedBooks, searchStatus } = this.props;

  return (
    <div>
      {searchStatus.pending && ('Loading...')}
      {searchStatus.failed && (
        <div>
          There was an error running your search.
          <button onClick={this.performSearch}>
            Retry.
          </button>
        </div>
      )}
      {searchStatus.succeeded && (
        <ul>
          {searchedBooks.map(book => (
            <li key={book.id}/>
              {book.title} - {book.releaseYear}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Determining When a Request Succeeds

Sometimes, you want to know the exact moment that a request succeeds. Redux doesn't provide an event system for things like this (for better or worse), so you must instead check the previous state with the next state to determine when a request changes from one status to the other.

We recommend performing this check within componentWillReceiveProps. 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
  componentWillReceiveProps(nextProps) {
    const { searchStatus } = this.props;

    // Bail if the request wasn't previously pending (requests can only succeed
    // if they've been started!)
    if (!searchStatus.pending) {
      return;
    }

    const nextSearchStatus = nextProps.searchStatus;
    if (nextSearchStatus.succeeded) {
      console.log('The search request just succeeded.');
    }
  }
}


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

  return {
    searchStatus
  };
}

results matching ""

    No results matching ""