redux-blackbox

Reduce redux boilerplate by following conventions

How to use

setup reducer

// reducer/index.js

import { createReducer } from "redux-blackbox";


export default {
  users: createReducer("users")
}

setup actions

// actions/users.js
import { fetchListingAction } from "redux-blackbox";

const fetchUsers = () => {
  return axios.get("/users");
}

export const fetchUsersAction = () => {
  return async (dispatch) =>{
    return await fetchListingAction("users", dispatch, fetchUsers);
  }
}

setup component

// components/ListUsers.js
import { IN_PROGRESS, FAILED, SUCCESS } from "redux-blackbox";


class ListUsers extends React.Component {
  componentDidMount() {
    this.props.fetchUsersAction();
  }
  render() {
    const {users} = this.props;
    if (users.uiState === IN_PROGRESS) {
      return <div>Loading...</div>
    }
    if (users.uiState === FAILED) {
      return <div className="notification is-danger">{users.error.message}</div>
    }
    if (users.uiState === SUCCESS) {
      if (users.listing.length) {
        return (
          <div>
            <ul>
              { users.listing.map(user =>{
                  return <li>{user.name}</li>
                }) 
              }
            </ul>
          </div>
        )
      } else {
        return <div>Users list is empty</div>
      }
    }
    return null;
  }
}

const mapStateToProps = (state) =>{
  return {
    users: state.users
  }
}

const mapDispatchToProps = {
  fetchUsersAction
}

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

License

Please see License