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

@recruit-tech/redux-async-loader

v2.0.1

Published

Async data loader for Redux apps.

Downloads

8

Readme

redux-async-loader

Async data loader for Redux apps with React-Router.

CAUTION

redux-async-loader is incompatible with react-redux@5

For react-redux@5, you neeed to use the 1.x release of redux-async-loader.

Installation

npm install --save redux-async-loader

Usage

1. Register Reducer

import { combineReducers, createStore } from 'redux';
import { reduxAsyncLoader } from 'redux-async-loader';

const store = createStore(combineReducers({
  reduxAsyncLoader,
  ...
}), initialState);

2. Server-Side Rendering (Optional)

import { applyRouterMiddleware, match, RouterContext } from 'react-router';
import { loadOnServer } from 'redux-async-loader';

match({ history, routes }, (error, redirectLocation, renderProps) => {
  // ...

  loadOnServer(renderProps, store).then(() => {
    const content = renderToString(
      <Provider store={store} key="provider">
        <RouterContext {...renderProps} />
      </Provider>
    );
  });
});

3. Client-Side Rendering

import { render } from 'react-dom';
import { Router, applyRouterMiddleware, browserHistory } from 'react-router';
import { useAsyncLoader } from 'redux-async-loader';

const RenderWithMiddleware = applyRouterMiddleware(
  useAsyncLoader(),
);

render(
  <Provider store={store} key="provider">
    <Router history={browserHistory} render={(props) => <RenderWithMiddleware {...props} />} />
  </Provider>
, el);

If you are using react-router-scroll, it should be applied after redux-async-loader.

import useScroll from 'react-router-scroll';

const RenderWithMiddleware = applyRouterMiddleware(
  useAsyncLoader(),
  useScroll()
);

4. Async data loading by routing (both client and server-side rendering)

import { connect } from 'react-redux';
import { asyncLoader } from 'redux-async-loader';

class UserList extends React.Component {
  // ...
}

export default asyncLoader((props, store) => store.dispatch(loadUsers(props)))(
  connect({ ... }, { ... })(
    UserList
  )
);

or, with decorator:

@asyncLoader((props, store) => store.dispatch(loadUsers(props)))
@connect({ ... }, { ... })
export default class UserList extends React.Component {
  // ...
}

or, with recompose:

import { compose } from 'recompose';

export default compose(
  asyncLoader((props, store) => store.dispatch(loadUsers(props))),
  connect({ ... }, { ... })
)(class UserList exptends React.Component {
  // ...
});

Unlike redux-async-connect, redux-async-loader itself doesn't connect to store. You have to call connect() explicitly if you want to use store's state.

If you want to invoke asyncLoader() when just querystring (not path) is changed, you must specify key names of querystring to router.

<Route path="items" component=ItemList asyncLoaderProps={{queryKeys: "q, page"}} ... />

Or, you can use the wildcard for any keys of querystring:

<Route path="items" component=ItemList asyncLoaderProps={{queryKeys: "*"}} ... />

5. Async data loading by mounting/updating (client-side rendering only)

import { connect } from 'react-redux';
import { deferLoader } from 'redux-async-loader';

class UserList extends React.Component {
  // ...
}

export default deferLoader((props, store) => store.dispatch(loadUsers(props)))(
  connect({ ... }, { ... })(
    UserList
  )
);

or, with decorator:

@deferLoader((props, store) => store.dispatch(loadUsers(props)))
@connect({ ... }, { ... })
export default class UserList extends React.Component {
  // ...
}

or, with recompose:

import { compose } from 'recompose';

export default compose(
  deferLoader((props, store) => store.dispatch(loadUsers(props))),
  connect({ ... }, { ... })
)(class UserList exptends React.Component {
  // ...
});

API

asyncLoader(loader)

Creates Higher-order Component for async data loading by routing.

Arguments
  • loader (Function): Called when this component is routed.
    • Arguments
      • props (Object): The props passed from React-Router. See React-Router API docs for more info.
      • store: (Object): Redux's store object.
    • Returns
      • (Promise): Fulfilled when data loading is completed.
Returns
  • (Function): Creates higher-order component.
    • Arguments
      • wrappedComponent (Component): Wrapped component.
    • Returns
      • (Component): Wrapper component.

deferLoader(loader)

Creates Higher-order Component for async data loading by mounting and updating.

Arguments
  • loader (Function): Called when this component is mounted or updated.
    • Arguments
      • props (Object): The props passed from parent component.
      • store: (Object): Redux's store object.
    • Returns
      • (Promise): Fulfilled when data loading is completed.
Returns
  • (Function): Creates higher-order component.
    • Arguments
      • wrappedComponent (Component): Wrapped component.
    • Returns
      • (Component): Wrapper component.

loadOnServer(renderProps, store)

Loads async data on the server side.

Arguments
  • renderProps (Object): The props passed via match()'s callback. See React-Router API docs for more info.
  • store (Object): Redux's store object.
Returns
  • (Promise): Fulfilled when data loading is completed.