connect.md

connect(...connectArgs)

Enhances react-redux's connect so that redux-rest-easy knows which URLs have been requested by which components. If you have been using react-redux before, all you need to do for redux-rest-easy to work is changing the import from

import { connect } from 'react-redux';

to

import { connect } from '@brigad/redux-rest-easy';

Arguments

1. (connectArgs): The same arguments as react-redux's connect. See connect arguments.

Returns

(component): A component, which will be exactly the same as it would have been if wrapped in react-redux's connect. See connect's return.

Example

This example demonstrates how to use connect to wrap a simple component.

import React, { Component } from 'react';
import { connect } from '@brigad/redux-rest-easy';
import { getUsers, isRetrievingUsers, retrieveUsers } from './rest-easy/users';

class ConnectedComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      page: 1,
    };
  }

  componentDidMount() {
    this.props.retrieveUsers(this.state);
  }

  componentDidUpdate(prevState) {
    if (this.state.page !== prevState.page) {
      this.props.retrieveUsers(this.state);
    }
  }

  onPageChange = newPage => {
    this.setState({ page: newPage });
  };

  render() {
    if (this.props.isRetrievingUsers) {
      return <div>{'Loading...'}</div>;
    }

    return (
      <div>
        <select value={this.state.page} onChange={this.onPageChange} />
        <Users items={this.props.users} />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  users: getUsers(state, ownProps),
  isRetrievingOwnUsers: isRetrievingUsers(state, ownProps),
});

const mapDispatchToProps = dispatch => ({
  retrieveUsers: query => dispatch(retrieveUsers({ query })),
});

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedComponent);

Tips

• Selectors linked to a particular query need both state and ownProps. See selectors documentation.