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-thunk-service

v1.0.1

Published

Service thunk middleware for Redux.

Downloads

3

Readme

Redux Thunk service

This package is completely built on top redux-thunk https://github.com/reduxjs/redux-thunk

All the credits should got to original creators.

This project started as a fork of redux-thunk. And this only wraps the original library and is its dependency.

Injecting a Custom Argument Factory

The problem was that powerful function withExtraArgument has one flaw. You could not get state or dispatch inside it.

So the original usage was like this:

const api = 'http://www.example.com/sandwiches/';
const whatever = 42;

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);

// later
function fetchUser(id) {
  return (dispatch, getState, { api, whatever }) => {
    // you can use api and something else here
  };
}

But obvious problem was that how could you construct such url for fetch dynamically using state? Like this:

class Api {
  constructor(getState, fetchApi) {
    this.getState = getState
    this.fetchApi = fetchApi
  }

  get(url) {
    return this.fetchApi.get(`${this.getState().config.base Url}/${url}`)
  }
}

You could not do so. And that's just one case. There many and many occasion where you need app state to execute sideffects or at least to simplify the code and not to repeat yourself.

So the solution was an API like this:

const store = createStore(
  reducer,
  applyMiddleware(
    thunk.withExtraArgument((dispatch, getState) => ({
      api: new Api(getState, fetch.bind(window)),
      whatever,
    })),
  ),
);

To achieve this the middleware needed to be changed. I tried to persuade the mantainers to add it. Howerever, it was considered to be too much advanced for redux-thunk. Fair enough. I forked it.

Usage

This library only wraps redux-thunk but changes API a bit.

import createThunkService from 'redux-thunk-service';

const store = createStore(
  reducer,
  applyMiddleware(
    createThunkService((dispatch, getState) => ({
      api: new Api(getState, fetch.bind(window)),
      whatever,
    })),
  ),
);

That's it. The factory is only called once when the store is instantiated. This means that instances in the factory are created only ones.

I definitely recommend this for passing dependencies to do side effects.

Typescript support

I have a problems with running typescript properly in this lib. I managed to fix all the big issues but there was still one types test that failed and I did not know what to do with it so I commented it out.

If you knew how to fix this test please do!

It seems to me that typing in the redux-thunk was not correct for connected props. Consider this:

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

const thunkActionCreator = (): ThunkResult<Promise<void>> => (dispatch, getState) => {
  return Promise.resolve()
}

// calling pure action creator returns a function logically
thunkActionCreator() === fn(dispatch, getState) {}

// but when dispatched, ti returns result of thunk
dispatch(thunkActionCreator()) === Promise.resolve()

// props like this should return an error
interface Props {
  thunkActionCreator: typeof thunkActionCreator
}
// And it does! But if you call bindActionCreators in the connect() it "unpacked" the action creators.
// But this result in the problem:

export function App(props: Props) {
  // The problem
  props.thunkActionCreator() = Promise.resolve() // Types says OK but it is wrong!! Why? Because:
  typeof thunkActionCreator is a Function, not Promise.resolve()
}

export default connect(
  () => ({}),
  dispatch => bindActionCreators({ thunkActionCreator }, dispatch)
)

// other file

// This is correct:
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { ThunkDispatchAction } from 'redux-thunk-service'

const thunkActionCreator = (): ThunkResult<Promise<void>> => (dispatch, getState) => {
  return Promise.resolve()
}

interface Props {
  thunkActionCreator: ThunkDispatchAction<typeof thunkActionCreator>
}

export function App(props: Props) {
  // The correct type!
  props.thunkActionCreator() === Promise.resolve()
}

export default connect(
  () => ({}),
  dispatch => bindActionCreators({ thunkActionCreator }, dispatch)
)

So don't forget to wrapp thunk action createor with ThunkDispatchAction<typeof thunkActionCreator>. And if this is wrong please file an issue and help me to fix it!

Thanks

License

MIT