Motivation

React should render DOM elements, and Redux should handle state management - easy to say, hard to do. seamless-redux facilitate the separation between React and Redux by eliminating the dispatch method and the overhead of writing repetitive code.

To improve React/Redux architecture, seamless-redux created decorators for common actions/reducers/selectors to better handle state management for loading state, data state, and error state.

• Yes, seamless-redux is using reselect by default
• Yes, seamless-redux and can be integrated to an exciting store
• No, seamless-redux is not a breaking change

Install

npm install seamless-redux

Documentation

seamless-redux documentations

Live Example

Example

Entity

Creating an entity will initiate the data, loading, and error states.

seamless.createEntity("User", {});

React Component

import React from 'react';
import { selectors } from 'seamless-redux';

const {
  selectData, selectLoading, selectIsError, selectErrorData,
} = selectors;


class MyComponent extends React.PureComponent {
  componentDidMount() {
    authUserAction(email, password);
  }
 
  render() {
    const { isLoading, isError, errorMessage, user } = this.props;
    return <div />
  }
}

selectors

const mapStateToProps = state => ({
  isLoading: selectLoading(state, "MyEntity"),
  isError: selectIsError(state, "MyEntity"),
  errorMessage: selectErrorData(state, "MyEntity"),
  user: selectData(state, "MyEntity"),
});

export default connect(
  mapStateToProps,
  null
)(MyComponent);

Action

export const authUserAction = (email, password) => {
  const userEntity = seamless.getEntity("User");
  userEntity.start();
  userEntity.resetError();
  // Or userEntity.reset();

  authApi(email, password)
    .then((response) => userEntity.newData(response.data))
    .catch(() => userEntity.newError("Error auth"))
    .finally(() => userEntity.finish());
};