Uptrend-redux-modules NPM

The problem

At Uptrend we enjoy building React applications and have had success using redux + normalizr to manage state and redux-saga + redux-saga-thunk to orchestrate application side effects (i.e. asynchronous things like data fetching). Code is easy to understand and typically works as expected but someone could have a criticism about the amount of ceremony and boilerplate required.

Typically, whenever adding a new entity to an app it required us to write reducers, actions, sagas, schemas, selectors, and container components to get basic CRUD functionality.

This solution

Create a concise and straightforward way to make HTTP requests that normalize response handling including normalization of response data into index entities in the redux store. To get CRUD functionality for a new entity, you add a normalizr schema and use the provided actions and selectors provided by URM (uptrend-redux-modules). URM also provides render prop React components that simplify and reduce the amount of code needed.

Below are code examples to highlight what using URM resource and entities looks like:

ResourceDetailLoader Component

const OrgDetailAutoLoader = ({orgId}) => (
  <ResourceDetailLoader resource="org" resourceId={orgId} autoLoad>
    {({status, result, onEventLoadResource}) => (
      <div>
        <pre>{'autoLoad={true}'}</pre>

        <button onClick={onEventLoadResource} disabled={status.loading}>
          Load Resource
        </button>

        {status.initial && <span className="label label-default">initial</span>}
        {status.loading && <span className="label label-primary">loading</span>}
        {status.error && <span className="label label-danger">error</span>}
        {status.success && <span className="label label-success">success</span>}

        {status.loading ? (
          <h5>Loading...</h5>
        ) : (
          result && (
            <div>
              <div>
                Org ID: <code>{result.id}</code>
              </div>
              <div>
                Active: <code>{result.active ? 'Yes' : 'No'}</code>
              </div>
            </div>
          )
        )}
      </div>
    )}
  </ResourceDetailLoader>
)

ResourceListLoader Component

const OrgListLoader = () => (
  <ResourceListLoader resource="org">
    {({status, result, onEventLoadResource}) => (
      <div>
        <div>
          <pre>{'autoLoad={false}'}</pre>
          <pre>{JSON.stringify(status, null, 2)}</pre>
        </div>

        <button onClick={onEventLoadResource} disabled={status.loading}>
          Load Resource
        </button>

        {status.initial && <span className="label label-default">initial</span>}
        {status.loading && <span className="label label-primary">loading</span>}
        {status.error && <span className="label label-danger">error</span>}
        {status.success && <span className="label label-success">success</span>}

        {status.loading ? (
          <h5>Loading...</h5>
        ) : (
          result &&
          result.map(org => (
            <div key={org.id}>
              <span>
                Org ID: <code>{org.id}</code>
              </span>
              <span>
                Active: <code>{org.active ? 'Yes' : 'No'}</code>
              </span>
            </div>
          ))
        )}
      </div>
    )}
  </ResourceListLoader>
)

Using Resource Redux-Saga-Thunk Style

Resource actions provide a promise based interface that redux-saga-thunk allows. Below shows how a resource can use without using selectors. This is nice when you need resource data to save locally.

import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'

const mapDispatchToProps = dispatch => ({
  loadGroups: () =>
    dispatch(resourceListReadRequest('group', {active: true}, 'group')),
})

class GroupListContainer extends React.Component {
  state = {
    loading: false,
    groupList: null,
  }

  componentDidMount() {
    this.loadGroups()
  }

  loadGroups() {
    this.setState({loading: true})
    this.props.loadGroups().then(this.handleLoadSuccess, this.handleLoadFail)
  }

  handleLoadFail = error => {
    this.setState({loading: false, error})
  }

  handleLoadSuccess = ({entities}) => {
    this.setState({loading: false, groupList: entities})
  }

  render() {
    const {loading, groupList} = this.state

    if (loading) return <div>Loading...</div>

    return (
      <ul>{groupList.map(group => <li key={group.id}>{group.name}</li>)}</ul>
    )
  }
}

GroupListContainer.propTypes = {
  fetchTripGroupList: PropTypes.func.isRequired,
}

export default connect(null, mapDispatchToProps)(GroupListContainer)

Redux Modules

There

// TODO

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

yarn add uptrend-redux-modules

Example Project Usage

Below is an example of how one may set it up in a react app using the resource and entities redux-modules.

Do note there are many ways you could organize your project and this example is not strict guidelines by any means.

Resource & Entities

src/store/modules/resource/index.js

// - src/store/modules/resource/index.js
import {createResource} from 'uptrend-redux-modules'

// createResource(...) => { actions, reducers, sagas, selectors }
export default createResource()

src/store/modules/entities/index.js

// - src/store/modules/entities/index.js
import {createEntities} from 'uptrend-redux-modules'
import schemas from './schemas'

// createEntities(...) => { actions, middleware, reducers, sagas, selectors }
export default createEntities({schemas})

src/store/modules/entities/schema.js

// - src/store/modules/entities/schemas.js
import {schema} from 'normalizr'

export const user = new schema.Entity('users')
export const team = new schema.Entity('teams', {owner: user, members: [user]})

src/store/actions.js

// - src/store/actions.js
import {actions as entities} from 'src/store/modules/entities';
import {actions as resource} from 'src/store/modules/resource';

export {
  ...entities,
  ...resource,
}

src/store/middlewares.js

// - src/store/middlewares.js
import {middleware as entities} from 'src/store/modules/entities'

export default [
  // redux-modules middlewares
  entities,
]

src/store/reducers.js

// - src/store/reducer.js
import {combineReducers} from 'redux'

import {reducer as entities} from 'src/store/modules/entities'
import {reducer as resource} from 'src/store/modules/resource'

export default combineReducers({
  entities,
  resource,
})

src/store/sagas.js

// - src/store/sagas.js
import {sagas as entities} from 'src/store/modules/entities'
import {sagas as resource} from 'src/store/modules/resource'

// single entry point to start all Sagas at once
export default function*(services = {}) {
  try {
    yield all([
      // app specific sagas
      example(services),

      // redux-modules sagas
      entities(services),
      resource(services),
    ])
  } catch (error) {
    console.error('ROOT SAGA ERROR!!!', error)
    console.trace()
  }
}

src/store/selectors.js

// - src/store/selectors.js
import {selectors as fromEntities} from 'src/store/modules/entities'
import {selectors as fromResource} from 'src/store/modules/resource'

export {fromEntities, fromResource}