@brigad/redux-rest-easy

Last updated 6 years ago

@brigad/redux-rest-easy

Redux/React/React Native framework handling network requests, state management, selectors, caching and much more

Installation

yarn add @brigad/redux-rest-easy

Or, if you are using npm:

npm install --save @brigad/redux-rest-easy

Problem

At Brigad, we have been extensively using redux and redux-thunk to perform network requests, and store/access the resulting data, and we always felt some pain points, or at least like there were things we could do better:

We were often copying/pasting a lot of code (along with some logic regarding caching, hooks, etc) from one file to another each time we would create a new resource or action
Our state was not organized at all, and accessing it was messy and error-prone
We had a huge caching problem: sometimes performing unnecessary requests, sometimes not performing requests which should have been
We had no way to know if a given component was performing an action, we only knew if an action was being performed on a given resource

Solution

To solve the problems listed above, redux-rest-easy generates actions, reducers, and selectors, and also manages the state's data and metadata for your network requests. It is easy to use, and to observe via the Redux Devtools.

It also provides sensible defaults, allowing you to use it with almost no configuration, but also to customize anything you would like.

API

import {
  createResource,
  reducer,
  connect,
  reset,
  initializeNetworkHelpers,
  getPersistableState,
} from '@brigad/redux-rest-easy';

Internals

Core principles

Minimal Example

// users.js

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

const users = createResource('users')({
  retrieve: {
    method: 'GET',
    url: 'https://my-api.com/users',
    afterHook: () => console.log('Users retrieved successfully'),
  },
});

const {
  actions: { retrieve: retrieveUsers },
  selectors: {
    resource: { getResource: getUsers },
    retrieve: {
      request: { isPerforming: isRetrievingUsers },
    },
  },
} = users;

export { retrieveUsers, getUsers, isRetrievingUsers };

// reducers.js

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

const reducers = combineReducers({
  restEasy: reducer,
});

// UsersList.js

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

class UsersList extends Component {
  state = {
    error: false,
  };

  componentDidMount() {
    this.props.retrieveUsers(this.onSuccess, this.onError);
  }

  onSuccess = () => {
    this.setState({ error: false });
  };

  onError = () => {
    this.setState({ error: true });
  };

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

    if (this.state.error) {
      return (
        <div>{'There seems to be a problem... A network error occured.'}</div>
      );
    }

    return <Users items={this.props.users} />;
  }
}

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

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

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