Recipes

Recipes

Defer the request until a button is clicked

<Request
    url='https://my-awesome-doma.in/me'
    defer={true}                            
{/* Tell the Request component to defer the request */}
    ref={(req) => this.request = req}
{/* Fire the request when ready using:
    this.request.fire();
 */} />

    <View>
        <Request.Start>
            <MyAwesomeSpinner />
        </Request.Start>
        <Request.Success>
            <MyAwesomeContent />
        </Request.Success>
        <Request.Failure>
            <MyAwesomeErrorMessage />
        </Request.Failure>
    </View>
</Request>

Adding authorization header

• Create a HOC with Auth header

import React from 'react';
import { connect } from 'react-redux';

import Request from 're-quests';


class AuthRequest extends React.Component {
    render() {
        let {headers, ...props} = this.props;

        // safety check, just in case headers was not passed :)
        // we don't want to override the headers,
        // we just wanna make sure that correct Authorization header
        // is being added for the request that needs it
        headers = headers || {};
        headers['Authorization'] = this.props.auth.header;

        return (
            <Request
                {...props}
                headers={headers}
            />
        );
    }
}

AuthRequest = connect((store) => {
    return {
        auth: store.auth
    }
})(AuthRequest);

export default AuthRequest;

• Use the newly created HOC instead of the Request component.