redux-compose-async
v1.0.4
Published
create a resolving [ducks module](https://github.com/erikras/ducks-modular-redux) in seconds with these little helpers
Downloads
4
Readme
redux-compose-async
create a resolving ducks module in seconds with these little helpers
why?
ever wanted an action to resolve or reject like this?
try {
await fetchFromMyApi({ uuid })
await fetchSomethingElse({ uuid })
await displaySomeNotificiation({ uuid })
} catch (e) {
console.log('reject')
}
Installation
yarn
yarn add redux-compose-async
npm
npm add redux-compose-async
API
Example
Reducks Module
my-store.js
import { createFetchSaga, createRootSaga, createDataReducer, createActionCreator, createActionParents } from 'redux-compose-async'
export const { FETCH_FROM_MY_API } = createActionParents([ 'FETCH_FROM_MY_API' ])
export const fetchFromMyApi = createActionCreator(FETCH_FROM_MY_API)
export const fetchFromMyApiSaga = createFetchSaga(({ uuid }) => ({
action: FETCH_FROM_MY_API,
url: `//${process.env.api}/${uuid}`,
method: 'GET',
}))
export const rootSaga = createRootSaga({
FETCH_FROM_MY_API: fetchFromMyApiSaga,
})
export default createDataReducer(FETCH_FROM_MY_API)
Higher Order Store Connection
with-my-store.js
import { connect } from 'react-redux'
import { fetchFromMyApi } from './my-store.js'
import { promisifyActionCreator } from 'redux-compose-async'
export default connect(
({ myStore }) => ({ myStore: { ...myStore } }),
dispatch => ({
fetchFromMyApi: promisifyActionCreator(dispatch, fetchFromMyApi)
})
)
Example Component with async usage
my-component/index.js
import { compose } from 'recompose'
import withLogic from './with-logic'
import withData from './with-data'
import View from './View'
export default compose(withData, withLogic)(View)
my-component/with-data.js
import withMyStore from './with-my-store'
export default withMyStore
my-component/with-logic.js
import { compose, withHandlers } from 'recompose'
export default withHandlers({
fetchHandler: ({ fetchFromMyApi }) => async ({ uuid }) => {
try {
await fetchFromMyApi({ uuid })
console.log('resolve')
} catch (e) {
console.log('reject')
}
},
})
my-component/View.js
export default ({ fetchHandler }) => (
<div {...{ onClick: () => fetchHandler({uuid: '2fe17f6b-c083-4603-8a45-eaa26a422f31' })}} />
)