rar

redux-api-react-switch

A React+Redux component to work easily with REST states

Showing:

Popularity

Downloads/wk

0

GitHub Stars

3

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

redux-api-react-switch

npm wercker status Codecov GitHub issues Codacy grade

A React+Redux component to work easily with REST states.

Motivation

Using Redux with REST APIs is complicated. Depending on the state of the API call (pending, fetched, errored...), your UI should change. Making it easy to read and understand can be complex. Also, as many component may rely on the same state variable, handling it inside each of them leads to many code redundancy.

This package helps you use REST state variables in a more readable way and prevents code redundancy as much as possible.

It is meant to be used with redux-api, but it can be used with any other library. See the example below.

Usage

const React = require("react");
const ReactRedux = require('react-redux');

import { 
  Switch, 
  Init, 
  FirstFetch, 
  Fetched,
  NextFetch,
  Error } from 'redux-api-react-switch';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <Switch state={this.props.rest_item}>
          <Init>Initial state, not pending</Init>
          <FirstFetch>First fetch pending</FirstFetch>
          <Fetched>Data fetched : {JSON.stringify(this.props.rest_item)}</Fetched>
          <NextFetch>Another fetch pending. Current data : {JSON.stringify(this.props.rest_item)}</NextFetch>
          <Error>An error occured : {JSON.stringify(this.props.rest_item.error)}</Error>
        </Switch>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    rest_item: state.rest_item
    /**
    rest_item must have the structure below (from `redux-api`). 
    If your state doesn't provide this structure directly, you should adapt the object here
    {
      loading: Boolean,
      sync: Boolean,
      data: Object or undefined,
      error: Any
    }
    */
  }
}

module.exports = ReactRedux.connect(
  mapStateToProps
)(MyComponent);

Components

The Main component is <Switch>. It takes only one prop : state, that can be a state object or an array of state objects. It can only contains the subcomponent described below.

There are five "atomic" subcomponents :

  • <Init> : The initial state. The data has not been fetched yet and no HTTP request is ongoing.
  • <FirstFetch> : This state is shown when the first HTTP request is ongoing.
  • <Fetched> : The data has been fetched successfully. No HTTP request is ongoing.
  • <NextFetch> : The data has already been fetched, but a new HTTP request is ongoing.
  • <Error> : An error occured.

As a complement, there are also some "composite" subcomponents :

  • <NotFetched> === <Init + FirstFetch>
  • <AnyFetch> === <FirstFetch + NextFetch>
  • <FetchedOnce> === <Fetched + NextFetch>
  • <AnyResult> === <FetchedOnceOrError> === <Fetched + NextFetch + Error>

Events

Each subcomponent has the following events :

  • onMount() : triggerred when the subcomponent is mounted.
  • onUnmount() : triggerred when the subcomponent is unmounted.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial