Simplify app code needed to load and access resource (and entities).

[orther]

Overview

There is quite a bit of boilerplate and ceremony involved to loading a resource,
checking it's status (pending/failed/done/etc) and then getting the response
using selectors (and pulling from entities if an entityType was set).
Traditionally using the redux-saga-thunk pattern is how we've avoided using
selectors. We can make this lib easier to use (less code, less thinking) and
more robust by providing mechanism(s) that do what the current boilerplate code
does. To support multiple use cases I believe it makes sense to provide these
helpers as action/selectors creators, render prop components (based off
selectors) and possible HoCs (higher order components).

Current Usage Example

Here is an example from one of our projects using resource/entities
redux-modules (not from uptrend-redux-modules but it has same API). Notice how
the request path member/search is used in the status selectors and in resource
getList selector. Also the entity type memberSearch is used in request action
and entities getList selector. Do note request path and entityType always need
to match like this:

import { isPending, hasFailed, isDone } from 'redux-saga-thunk';

import { fromEntities, fromResource } from 'rides/store/selectors';
import { modalShow, resourceListCreateRequest } from 'rides/store/actions';
import { MemberSearchPage } from 'rides/components';

const mapDispatchToProps = {
  search: searchParams =>
    resourceListCreateRequest(`member/search`, searchParams, 'memberSearch'),
  showCreateModal: () => modalShow('create-member'),
};

const mapStateToProps = state => ({
  memberListDone: isDone(state, `member/searchListCreate`),       // <-
  memberListFailed: hasFailed(state, 'member/searchListCreate'),  // <- notice the duplication
  memberListPending: isPending(state, 'member/searchListCreate'), // <-
  memberList: fromEntities.getList(
    state,
    'memberSearch', // <- entityType
    fromResource.getList(state, 'member/search'), 
  ),
});

Desired Usage Example

import {resourceCreate} from 'src/store/helpers'

const search = resourceListCreate(
  'member/search', // <- resource
  'memberSearch',  // <- entityType
);

const mapDispatchToProps = {
  search: params => search.action(params), // = resourceListCreateRequest(`user/member`, data, 'member)
};

const mapStateToProps = state => ({
  memberListDone: search.selectors.done(state),
  memberListFailed: search.selectors.rejected(state),
  memberListPending: search.selectors.pending(state),
  memberList: search.selectors.result(state),
});

What the search object looks like:

const search = {
  // The action will take whatever args the resource request action creator
  // takes besides `resource` and `entityType`. Most of the resource request
  // action creators take a single arg of: (data | needle | params)
  // `resourceUpdateRequest` takes two args: (needle, data)
  action, 
  
  selectors: {
  // redux-saga-thunk selectors
  pending,   // <- loading  (boolean)
  fulfilled, // <- success  (boolean)
  rejected,  // <- error    (boolean)
  done,      // <- finished (boolean)
  
  // returned data
  resource, // <- resource data (when normalized returns entity id(s))
  result,   // <- if the resource was normalized into entities this
            //    holds the list of entities, otherwise returns the
            //    resource data (non-normalized)
  }
}

Action & Selectors Creator

It should be pretty straight forward to create a helper that returns the request
action and selectors for accessing a resource like the above example.

• src/store/helpers/index.js

  import {createResourceHelpers} from 'uptrend-redux-modules';
  import entities from 'sow/store/modules/entities';
  import resource from 'sow/store/modules/resource';
  
  const {
    // NOTE: one for each resource request action type
    resourceCreate,
    resourceDelete,
    resourceDetailRead, 
    resourceListCreate,
    resourceListRead,
    resourceUpdate, 
  } = createResourceHelpers({entities, resource});
  
  export {
    resourceCreate,
    resourceDelete,
    resourceDetailRead, 
    resourceListCreate,
    resourceListRead,
    resourceUpdate, 
  }

• src/containers/MemberAddContainer.js

Render Prop Components

TBD - (Mostly copied from AECS)

Implementation Checklist

Upgrade redux-saga-thunk

• Required for new status selectors (pending, fullfiled, rejected, done)

Helper Creators (one for each action creator below)

• resourceCreateRequest
  • resourceCreateRequest = (resource, data, entityType) => ({
• resourceListCreateRequest
  • resourceListCreateRequest = (resource, data, entityType) => ({
• resourceUpdateRequest
  • resourceUpdateRequest = (resource, needle, data, entityType) => ({
• resourceListReadRequest
  • resourceListReadRequest = (resource, params, entityType) => ({
• resourceDeleteRequest
  • resourceDeleteRequest = (resource, needle, entityType) => ({
• resourceDetailReadRequest
  • resourceDetailReadRequest = (resource, needle, entityType) => ({
• resourceDeleteRequest
  • resourceDeleteRequest = (resource, needle, entityType) => ({

[orther]

🎉 This issue has been resolved in version 0.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀