redux-suspense
A redux middleware that lets you use your own data fetching and expose the results in a suspense compatible way
Caution:
- Suspense API is an experimental features that is not yet available in a stable React release.
Basic usage guide
npm install redux-suspense
Step 1 of 4: Suspense reducer
Add the reducer
// src/reducers/index.js const rootReducer =
Step 2 of 4: Suspense middleware
;; ; const store = ;
Step 3 of 4: Create a resource
// src/resources/postsResources.js; const postsResource =
If you want to store the posts in your own reducer just pass a selector to createResource
. For example:
const postsResource = // Then you can export the success action to handle it in your reducer.const success: fetchPostsSuccess = postsResource
createResource
will create a couple more things:
resourceName
This is the same string you passed as first argument.handler
The function you passed as the second argument.success
,error
andrequest
These are action creators. All of which have atoString()
method. In the example abovesucces.toString()
would evaluate to'POSTS_SUCCESS'
selector
The selector you passed as the third argument.
Step 4 of 4: Consume a resource
Dispatch the resource as an action, as soon as you want to start fetching data. And use useResource
as if it was a selector, inside a <Suspense>
tag.
{ const dispatch = return <Suspense fallback=<h1> Loading...</h1>> <Posts /> </Suspense> }
{ const users = return <div> posts </div> }
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
License
This project is licensed under the ISC License - see the LICENSE file for details