Git Product home page Git Product logo

redux-routines's Introduction

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

redux-routines's People

Contributors

dependabot[bot] avatar onrige avatar renovate-bot avatar renovate[bot] avatar svagi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

onrige kirsantov

redux-routines's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Action type uppercase

Hey. Just a question. Why do you transform action type string to uppercase? It looks like a surplus operation in my opinion.

Merge with redux-saga-routines

Hello @svagi! I'm the author of redux-saga-routines package. As you can see, our packages are almost similar (i think you package are based on my ideas). I'd like to divide my package into redux-routines and redux-form-saga-routines.

What do you think, if we take my implementation of routines (based on redux-actions) for redux-routines package?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/nodejs.yml
  • actions/checkout v4
  • actions/setup-node v3
npm
package.json
  • redux-actions ^2.6.5
  • @babel/cli ^7.14.8
  • @babel/core ^7.15.0
  • @babel/preset-env ^7.15.0
  • jest ^28.0.0
  • rimraf ^3.0.2
  • standard ^17.0.0
nvm
.nvmrc

  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.