https://github.com/svagi/redux-routines

👷 Predefined actions creators and action types for common async tasks in a single object called "routine"
https://github.com/svagi/redux-routines

action-creator boilerplate redux redux-actions redux-boilerplate redux-routines routines simple-api

Last synced: 8 days ago
JSON representation

👷 Predefined actions creators and action types for common async tasks in a single object called "routine"

• Host: GitHub
• URL: https://github.com/svagi/redux-routines
• Owner: svagi
• License: mit
• Created: 2017-05-30T14:54:16.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-07-30T04:20:40.000Z (3 months ago)
• Last Synced: 2024-07-30T08:03:27.070Z (3 months ago)
• Topics: action-creator, boilerplate, redux, redux-actions, redux-boilerplate, redux-routines, routines, simple-api
• Language: JavaScript
• Homepage:
• Size: 999 KB
• Stars: 12
• Watchers: 3
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# redux-routines

Simple, yet effective tool for removing Redux boilerplate code.

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![](https://badgen.net/bundlephobia/min/redux-routines)

![](https://badgen.net/bundlephobia/minzip/redux-routines)

## About

The `redux-routines` is utility library for [redux](https://github.com/reactjs/redux) whose main goal is simplicity and boilerplate reduction.

## Installation

```sh

npm install --save redux-routines

```

## Features

* Predefined actions creators and action types for common async tasks in a single object called "routine"

* [FSA](https://github.com/acdlite/flux-standard-action) compatible – based on [redux-actions](https://github.com/reduxactions/redux-actions) library

## The gist

```js

import { createStore } from 'redux'

import { createRoutine } from 'redux-routines'

// Create a new "fetchUsers" routine

const fetchUsers = createRoutine('FETCH_USERS')

// Created action types

fetchUsers.TRIGGER === 'FETCH_USERS_TRIGGER' // true

fetchUsers.REQUEST === 'FETCH_USERS_REQUEST' // true

fetchUsers.SUCCESS === 'FETCH_USERS_SUCCESS' // true

fetchUsers.FAILURE === 'FETCH_USERS_FAILURE' // true

fetchUsers.FULFILL === 'FETCH_USERS_FULFILL' // true

// Available actions

const payload = {}

fetchUsers.trigger(payload)

// { type: 'FETCH_USERS_TRIGGER', payload: {} }

fetchUsers.request(payload)

// { type: 'FETCH_USERS_REQUEST', payload: {} };

fetchUsers.success(payload)

// { type: 'FETCH_USERS_SUCCESS', payload: {} };

fetchUsers.failure(payload)

// { type: 'FETCH_USERS_FAILURE', payload: {} };

fetchUsers.fulfill(payload)

// { type: 'FETCH_USERS_FULFILL', payload: {} };

// Initial state of reducer

const initialState = {

  isProcessing: false,

  isFetching: false,

  data: [],

  error: null

}

// The reducer

function users(state = initialState, action) {

  switch (action.type) {

    case fetchUsers.TRIGGER:

      return { ...state, isProcessing: true }

    case fetchUsers.REQUEST:

      return { ...state, isFetching: true }

    case fetchUsers.SUCCESS:

      return { ...state, isFetching: false, data: action.payload }

    case fetchUsers.FAILURE:

      return { ...state, isFetching: false, error: action.payload }

    case fetchUsers.FULFILL:

      return { ...state, isProcessing: false }

  }

}

// The store

const store = createStore(users)

store.subscribe(() => console.log(store.getState()))

// Describe state changes with routine actions

store.dispatch(fetchUsers.trigger())

// { isProcessing: true, isFetching: false, data: [], error: null }

store.dispatch(fetchUsers.request())

// { isProcessing: true, isFetching: true, data: [], error: null }

store.dispatch(fetchUsers.success([1, 2]))

// { isProcessing: true, isFetching: false, data: [ 1, 2 ], error: null }

store.dispatch(fetchUsers.fulfill())

// { isProcessing: false, isFetching: false, data: [ 1, 2 ], error: null }

```

### License

MIT