Redux Suspense

npm install redux-suspense

About

This project is an experiment that aims at finding a way to integrate existing data flow (built with Redux) with upcoming React Suspense feature. The idea behind proposed implementation is to reduce the amount of imperative logic required for coupling Redux store to data fetched from the server side.

When using react-redux, developers create containers that synchronously read data from the store. In cases where data need to be loaded from the server, developers define componentDidMount() lifecycle method where by checking data presence they can dispatch necessary action that triggers data fetching. Once data arrived, a containers gets re-rendered assuming that the required data can now be read from the store.

When using redux-suspense, components read data from the store in the same synchronous way as before. If data is not available (not yet fetched) in the rendering phase, an "effect" is thrown out of component so React suspends the render till the effect (scheduled data fetching) is complete. After, React renders the component again with necessary data available in store.

The important part of the mechanism is that developers do not need to specify such logic in componentDidMount() explicitly every time, as it is needed now. However, the top-level logic remains the same. Current implementation hides this aspect from developers so it can be done in the most efficient way and updated with newer versions of React without forcing developers to refactor existing code.

Note: this project is an experiment. I encourage you to try, though carefully consider undiscovered bugs before using in your real projects.

API

import { createResourceMapper } from 'redux-suspense';

Resource mapper combines a state selector function and action creator in order to provide frictionless method to query async data from store.

import { connectSuspense } from 'redux-suspense';

Suspense connector is a higher-order component built on top of connect() in order to inject the state tree and dispatch function that is going to be used by a resource mapper.

import { Consumer } from 'redux-suspense';

The same connector as connectSuspense() but done with render prop pattern instead of higher-order component. No difference other than the pattern.

import { Placeholder } from 'redux-suspense';

A component wrapper that allows to show alternative content if async children can't render their content in defined time frame.

Examples

In examples folder you can find Reddit API Example which is basically an original advanced example improved by redux-suspense. In addition, Basic Example shows the minimal code implementation with tests.