Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including reresource with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-redux/package.json"); // react-redux is a peer dependency. require("redux/package.json"); // redux is a peer dependency. require("redux-saga/package.json"); // redux-saga is a peer dependency. var reresource = require("reresource")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

reresource v1.0.0-rc.13

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.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free