npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-react-fetch

v0.0.4

Published

merge in styling with ajax requests in redux

Downloads

5

Readme

##Redux React Fetch

npm install redux-react-fetch --save

###What is this?

It's not as complicated as it sounds. There's a bunch of promise-based middleware out there, this one simple expands on that idea. Take a look at redux-fetch. This library is, in my opinion, easier to use and does something awesome, and that's merging. Before we get to that, here's the idea:

  1. Write an action for an ajax request
  2. dispatch an optimistic update, with styling merged in!
  3. dispatch on success or fail, with new styling

###What's merging? Why Styles?

If you are writing a lot of promises, chances are you have been checking if requests finish, and adding in some sort of logic to show the user something is wrong. This middleware aims to make doing this a lot easier. I'm hoping more people have ideas on making this even better. My main use case for this is merging in styles and doing css transitions in between state changes.

##Example

###Include the Middleware

You can pass in your preferred fetch implementation!

import { createStore, applyMiddleware } from 'redux'
import reduxReactFetch from 'redux-react-fetch'
import fetch from 'isomorphic-fetch'

const createWithMiddleware = applyMiddleware(
  reduxReactFetch(fetch)
)(createStore)

###Write an action

export function updateTicket(ticketId, type, value){
  return {
    type: 'updateArticle',
    url: `http://test.com`,
    body: {
      article_id: ticketId,
      title: 'New Title'
    },
    then: 'updateTicketFinished'
  }
}

There's some things inferred here:

  • If no options are passed in the action, it will default to the following:
const options = {
  credentials: 'same-origin',
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
}
  • It is a wrapper around isomorphic-fetch. You can pass anything according to the fetch spec.
  • The body is JSON stringified for you, if it is a plain object. (If you send multipart/form-data you don't want it stringified)
  • then is optional. The same action will be called on success if it is not set. You can set catch as well.
  • mergeTo is the key to merge your object to, defaults to body

###Merge all the things!

Now it's the cool part. By default, a style object is merged into the body object in your action. When you set the state in your store, you don't need to do anything extra.

case 'updateArticle':
  return state.update(action.body.article_id, () => {
    return action.body
  })
case 'updateTicketFinished':
return state.update(action.body.article_id, () => {
  return action.response.result
})

Still don't get what's cool? Behind the scenes style (that you can change, you'll see) was added to the result and initial body:

import React from 'react'

export default ({title, style}) => (
  <h1 style={style}>{title}</h1>
)

When you dispatch the action to update the title, it will fade to 0.5 opacity, on response it will fade back to 1. And you didn't have to do anything! Cool right? If you don't like the defaults, here's how to change it. Pass in some stuff to the middleware when you apply it:

const start = {
  opacity: 0.5,
  transition: 'opacity .5s ease-in-out'
}

const end = {
  opacity: 1,
  transition: 'opacity .5s ease-in-out'
}

const endFail = {
  opacity: 1,
  border: 'solid red 1px',
  transition: 'opacity .5s ease-in-out'
}

const createWithMiddleware = applyMiddleware(
  reduxFetchMerger(fetch, {start, end, endfail})
)(createStore)

I'm fairly new to redux, so there may be some things I can improve. I also didn't document everything, hopefully I will soon!

##Example File Upload Action

export function newComment(comment, postId, attachments){
  let body = new FormData()
  attachments.forEach((file)=> {
    body.append('attachments[]', file)
  })
  body.append('user_id', user.id)
  body.append('text', comment.text)
  if(comment.status) body.append('status_id', comment.status)

  return {
    type: 'newComment',
    url: `https://test.com`,
    body,
    comment,
    postId,
    mergeTo: 'comment',
    options: {
      credentials: 'same-origin',
      method: 'post',
    },
    then: 'updateLatestComment'
  }