All Projects → svagi → redux-routines

svagi / redux-routines

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to redux-routines

flux-action-class
Boilerplate free class-based action creator. Following flux-standard-action spec. Built with TypeScript. Works with redux and ngrx.
Stars: ✭ 22 (+83.33%)
Mutual labels:  redux-actions, action-creator
Typesafe Actions
Typesafe utilities for "action-creators" in Redux / Flux Architecture
Stars: ✭ 2,343 (+19425%)
Mutual labels:  redux-actions, action-creator
redux-actions-helpers
Small helpers functions for creating and handle redux actions
Stars: ✭ 35 (+191.67%)
Mutual labels:  redux-actions
unity-async-tweens
Tween Extension to Unity-AsyncRoutines
Stars: ✭ 16 (+33.33%)
Mutual labels:  routines
Lang-app
Add a multi lang configuration to your WEB APP 'from scratch' [ANY FRAMEWORK, ANY PLUGIN, ANY API]
Stars: ✭ 15 (+25%)
Mutual labels:  simple-api
WPAlertControl
上下左右中心,多层级全方位弹框
Stars: ✭ 24 (+100%)
Mutual labels:  simple-api
typed-actions
Type-safe redux-actions
Stars: ✭ 43 (+258.33%)
Mutual labels:  redux-actions
Breadcrumb
Minimalistic Bitcoin toolkit for iOS.
Stars: ✭ 23 (+91.67%)
Mutual labels:  simple-api
vspheretools
vSphereTools is a set of scripts from DevOpsHQ to support working with vSphere and virtual machines (VMs) on it, which are based on the pysphere library.
Stars: ✭ 19 (+58.33%)
Mutual labels:  routines
ngx-redux-core
The modern redux integration for Angular 6+
Stars: ✭ 32 (+166.67%)
Mutual labels:  redux-actions
bodyweight-client
An Elm Frontend for a BodyWeight Workout Logging Application.
Stars: ✭ 26 (+116.67%)
Mutual labels:  routines
no-boilerplate-redux
Never write reducers or actions again.
Stars: ✭ 17 (+41.67%)
Mutual labels:  redux-boilerplate
fetch-action-creator
Fetches using standardized, four-part asynchronous actions for redux-thunk.
Stars: ✭ 28 (+133.33%)
Mutual labels:  redux-actions
redux-tools
💪 Maintaining large Redux applications with ease.
Stars: ✭ 34 (+183.33%)
Mutual labels:  redux-actions
redux-thunk-actions
Action creator for redux-thunk that handles sync and async functions.
Stars: ✭ 63 (+425%)
Mutual labels:  redux-actions
Hint.css
A CSS only tooltip library for your lovely websites.
Stars: ✭ 8,158 (+67883.33%)
Mutual labels:  simple-api
arcgisearth-automation-api
Use ArcGIS Earth Automation API to communicate with ArcGIS Earth from applications that support REST.
Stars: ✭ 15 (+25%)
Mutual labels:  simple-api
popyt
A very easy to use Youtube Data v3 API wrapper.
Stars: ✭ 42 (+250%)
Mutual labels:  simple-api
dotbro
Dotbro - simple yet effective dotfiles manager.
Stars: ✭ 19 (+58.33%)
Mutual labels:  routines
redux-action
🍻 Flux action utilities for Redux
Stars: ✭ 25 (+108.33%)
Mutual labels:  redux-actions

redux-routines

Simple, yet effective tool for removing Redux boilerplate code.

JavaScript Style Guide

About

The redux-routines is utility library for redux whose main goal is simplicity and boilerplate reduction.

Installation

npm install --save redux-routines

Features

  • Predefined actions creators and action types for common async tasks in a single object called "routine"
  • FSA compatible – based on redux-actions library

The gist

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].