‚̧Nerds Publishing Monstrosities
Miss any of our Open RFC calls?Watch the recordings here! ¬Ľ

reresource

1.0.0-rc.13¬†‚Äʬ†Public¬†‚Äʬ†Published

logo

reresource

ūüĎč

Build Status Version Documentation Maintenance License: MIT Twitter: rcelha

Manage resources in redux maintaining a sane mind

Install

yarn add reresource

Usage

Configure your store

import { applyMiddleware, combineReducers, createStore } from "redux";
import { reducer as resources, saga as resourceSaga } from "reresource";
import createSagaMiddleware from "redux-saga";
 
function rootReducer(state = {}, action) {
  return state;
}
 
const sagaMiddleware = createSagaMiddleware();
export default createStore(
  combineReducers({ rootReducer, resources }),
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(resourceSaga);

Fetch resource

import React from 'react';
import { getResource, fetchResource } from 'reresource';
 
class UserRepr extends React.Component {
  componentDidMount() {
    this.props.fetchResource('users', service.fetchUser, 1);
  }
 
  render() {
    if (this.props.user.error) return <div>Error loading user</div>;
    if (this.props.user.loading) return <div>loading...</div>;
    return <div>{this.props.user.data.fullName}</div>;
  }
}
 
const mapStateToProps = (state, props) => ({
  user: getResource(state, 'users', props.id),
});
 
const mapDispatchToProps = {
  fetchResource,
};

Delete resource

import React from 'react';
import { getResource, fetchResource, deleteResource } from 'reresource';
 
class UserRepr extends React.Component {
  componentDidMount() {
    this.props.fetchResource('users', service.fetchUser, 1);
  }
  
  deleteResource() {
    const { user } = this.props;
    this.props.deleteResource('users', service.deleteUser, user.data.id);
  }
 
  render() {
    if (this.props.user.error) return <div>Error loading user</div>;
    if (this.props.user.loading) return <div>loading...</div>;
    return <div>{this.props.user.data.fullName}<button onClick={deleteResource}>Delete</button></div>;
  }
}
 
const mapStateToProps = (state, props) => ({
  user: getResource(state, 'users', props.id),
});
 
const mapDispatchToProps = {
  fetchResource,
  deleteResource,
};

Docs

  1. Data-flow
  2. Examples
    1. Fetch resource
    2. List resources
    3. Create resource
    4. Update resource
    5. Delete resource
  3. HOC
  4. API docs

Run tests

yarn test

Author

ūüϧ Rodrigo Correa Alves

Show your support

Give a ‚≠źÔłŹ if this project helped you!

ūüďĚ License

Copyright © 2019 Rodrigo Correa Alves.

This project is MIT licensed.

Install

npm i reresource

DownloadsWeekly Downloads

1

Version

1.0.0-rc.13

License

MIT

Unpacked Size

134 kB

Total Files

128

Last publish

Collaborators

  • avatar