fetch-redux-crud
DRY up your Redux API code by leveraging conventions in RESTful APIs. Don't write ugly code, just use fetch-redux-crud
Last updated a year ago by yagudaev .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install fetch-redux-crud 
SYNC missed versions from official npm registry.

Fetch Redux Crud (Work In Progress)

CircleCI

A simple library to keep your redux api code DRY. If you are using a RESTful api, you should be able to eliminate a lot of duplicated reducers. This extends the already excellent redux-crud library.

Usage

// actions/users.js
import { fetch } from 'fetch-redux-crud'

export const fetchUser = () => fetch('users') // goes to GET `${config.apiUrl}/users`
// reducers/users.js
import { reducersFor } from 'fetch-redux-crud'

export default reducersFor('users') // automatically handles all actions for users
// selectors/users.js
import values from 'lodash/values'

// returns an array of all users, e.g. usage getUsers(state)
export const getUsers = (state) => values(state.users.items)

// returns users indexed by the user id, e.g. usage getUsersById(state)[1] <- gets user with id 1
export const getUsersById = (state) => state.users.items

Note: the resourceName passed in the fetch, create, update or destory should match the string passed to reducersFor.

Install

yarn add fetch-redux-crud

or

npm install --save fetch-redux-crud

Features

  • Optimistic updates
  • Automatic updates to Redux Store
  • Converts key casing like author_id to authorId (snake_case => camelCase)
  • Saves meta Data about requests
  • Simple

Configure

// main.js
import { config } from 'fetch-redux-crud'

config.apiUrl = 'http://path.to.api.domain/api/v1'
config.redirectUrl = 'http://path.to.login/page'

Removing root key in requests

Some API's are built such that requests and responses don't have a root JSON key. Of course, we account for that:

// actions/users.js

export const createUser = (countryId) => create('users', { name: 'Jim Beam' }, { key: false })

Which will generate JSON request like { name: 'Jim Beam' } and likewise understand a JSON response without a root key. This option works for all action types.

Custom REST Paths (Nested Paths)

Often we need to use nested paths, for example, GET /countries/:id/users, in these cases you can simply pass in a path like so:

// actions/users.js

export const getUsersForCountry = (countryId) => fetch('users', { path: `/countries/${countryId}/users` })

Customizing Reducers

You can add additional reducers or modify the existing behavior of fetch-redux-crud reducers by using a switch statement like so:

// reducers/users.js
import { actionTypesFor, reducersFor } from 'fetch-redux-crud'

const users = (state, action) => {
  const actionTypes = actionTypesFor('users')

  switch (action.type) {
  case actionTypes.fetchSuccess: // hook into the success action
    console.log('fetch users success', action.record)
    return reducersFor('users')(state, action)
  default: // handle rest of the actions
    return reducersFor('users')(state, action)
  }
}

export default jobs

Redux Action Types

fetch-redux-crud automatically creates all the CRUD action types for interacting with your API. It even does optimistic updates for you. Below is a list of all the different actions we support.

  • actionTypesFor(resourceName).<action_type>
    • fetchStart - a fetch has started

    • fetchSuccess - an api fetch has returned successfully from the server

    • fetchFailed - an api fetch request failed

    • createStart - a create has started

    • createSuccess - an api create has returned successfully from the server

    • createFailed - an api create request failed

    • updateStart - an update has started

    • updateSuccess - an api update has returned successfully from the server

    • updateFailed - an api update request failed

    • destroyStart - a destroy has started

    • destroySuccess - an api destroy has returned successfully from the server

    • destroyFailed - an api destroy request failed

Internal Redux State Structure

{
  [resourceName]: {
    items: {
      [id]: [object]
    },
    meta: {
      // data about last fetch, errors, etc
    }
  }
}

Contributing

To contribute to the repo please make sure you run:

yarn install
yarn test
yarn build # try creating a build

Then simply submit a PR for your change and we will take a look.

Publishing to NPM

To publish to npm run the following commands:

yarn build
yarn publish

Make sure tagged version is pushed to origin/master properly.

Related Projects

Current Tags

  • 0.0.10                                ...           latest (a year ago)

10 Versions

  • 0.0.10                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1
Dependencies (7)
Dev Dependencies (14)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |