https://github.com/dalechyn/react-redux-fetcher

Wrapper for any asynchronous actions to be called in React Concurrent Mode API
https://github.com/dalechyn/react-redux-fetcher

Last synced: 21 days ago
JSON representation

Wrapper for any asynchronous actions to be called in React Concurrent Mode API

• Host: GitHub
• URL: https://github.com/dalechyn/react-redux-fetcher
• Owner: dalechyn
• License: mit
• Created: 2020-03-18T20:22:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-03-19T22:01:26.000Z (over 4 years ago)
• Last Synced: 2024-10-07T23:41:39.615Z (about 1 month ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-redux-fetcher

![npm](https://img.shields.io/npm/v/react-redux-fetcher)

![npm bundle size](https://img.shields.io/bundlephobia/min/react-redux-fetcher)

Wrap your asynchronous actions to React Concurrent Mode resources.

### WARNING! 

It is designed for React Experimental Concurrent Mode API and it may change. 

We will maintain it, but don't consider using it in production.

## Install

```

$ npm install react-redux-fetcher

```

## Usage

1. Connect `reactFetcher` to your reducers:

```js

import { combineReducers } from 'redux'

import { reactFetcher } from 'react-redux-fetcher'

import { myReducers } from './myReducers'

    

const rootReducer = combineReducers({

    ...myReducers,

    reactFetcher

})

```

2. Use `wrapAsyncAction` to wrap any async Redux action that is needed to dispatch.

## Example

```js

import React, { Suspense } from 'react'

import { connect } from 'react-redux'

import { bindActionCreators } from 'redux'

import { wrapAsyncAction } from 'react-redux-fetcher'

const fetchData = new Promise(resolve => setTimeout(() => resolve(1337), 2000))

const asyncAction = async dispatch => dispatch({ type: 'ASYNC_ACTION', payload: ...(await fetchData)})

const FetchComponent = ({ resource }) => {

  resource.read()

  return 
Done!

}


const MyComponent = ({ wrappedFetch }) => (

  Loading...}>

    

  

)

const mapDispatchToProps = dispatch => 

  bindActionCreators({ wrappedFetch: wrapAsyncAction(asyncAction) }

export default connect(null, mapDispatchToProps)(MyComponent)

```