redux-saga-requests-react
React bindings for Redux-Saga-Requests, Redux-Saga addon to simplify AJAX requests
Installation
To install the package, just run:
$ yarn add redux-saga-requests-react
or...
$ npm install redux-saga-requests-react
or you can just use CDN: https://unpkg.com/redux-saga-requests-react
.
For general usage, see redux-saga-requests docs.
Purpose
This library is totally optional, but it reduces boilerplate of using react-saga-requests
state inside React components. It provides the following hooks and components:
useQuery
useQuery
is a hook which uses useSelector
from react-redux
together with getQuerySelector
from
redux-saga-requests
. It accepts the same arguments as getQuerySelector
. You could
easily use useSelector
directly, but useQuery
is slightly less verbose. So, without useQuery
:
;;; const Books = { const books = // ...};
and with useQuery
:
;; const Books = { const books = // ...};
Query
Query
simplifies rendering queries data, loading spinners and server errors. It automatically connects to Redux store
by using useQuery
under the hood. It has the following props:
type: string
: refer togetQuery
form the core libraryselector
: if you already have a query selector, pass it here instead oftype
multiple
: refer togetQuery
defaultObject
: refer togetQuery
children
- render function receivingquery
object, called when data is not empty according toisDataEmpty
propcomponent
- alternative prop tochildren
, you can pass your custom component here, which will receivequery
prop, plus any additional props passed toQuery
isDataEmpty: query => boolean
: function which defines whendata
is empty, by default data as empty array and falsy value likenull
,undefined
is considered as emptyshowLoaderDuringRefetch: boolean
:true
by default, change it tofalse
if you don't want to show spinner when data is updated - it will still show during initial fetch, but will not for subsequent requestsnoDataMessage
:string
or any React node, like<div>message</div>
, which will be rendered whendata
is empty according toisDataEmpty
function,null
by defaulterrorComponent
: custom React component, which will be rendered on error, receiveserror
prop,null
by defaulterrorComponentProps
: object of additional props passed toerrorComponent
loadingComponent
custom React component, which will be rendered when request is pending, useful for showing spinners,null
by defaultloadingComponentProps
: object of additional props passed toloadingComponent
Minimalistic example:
; <Query type=REQUEST_TYPE // or selector={myQuerySelector}> <div> data </div> </Query>
or with component
prop:
; const DataComponent = <div> <h1>extraLabelProp</h1> querydata </div>; <Query type=REQUEST_TYPE // or selector={myQuerySelector} component=DataComponent extraLabelProp="label"/>
or with all props:
; const LoadingComponent = <div> ...loading label </div>; const ErrorComponent = <div> Error with status code errorstatus label </div>; <Query type=REQUEST_TYPE // or selector={myQuerySelector} isDataEmpty= Array ? querydatalength === 0 : !querydata showLoaderDuringRefetch=false noDataMessage="There is no data" errorComponent=ErrorComponent errorComponentProps= label: 'Error label' loadingComponent=LoadingComponent loadingComponentProps= label: 'Loading label' > <div> data </div> </Query>
useMutation
useMutation
is a hook which uses useSelector
from react-redux
together with getMutationSelector
from
redux-saga-requests
. It accepts the same arguments as getMutation
. Like in case of useQuery
, you could
easily use useSelector
directly, but then you would need to remember not to recreate selector during each
render.
For example:
;; const Books = { const loading error = // ...};
Mutation
Mutation
Converts useMutation
into component with render prop. It has the following props:
type: string
: refer touseMutation
selector
: if you already have a mutation selector, pass it here instead oftype
requestKey: string
: refer touseMutation
children
- render function receiving object withloading
flag anderror
propertycomponent
- alternative prop tochildren
, you can pass your custom component here, which will receiveloading
anderror
props, plus any additional props passed toMutation
You use it like this:
; <Mutation type=MUTATION_TYPE // or selector={myMutationSelector}> { if error return <div>Something went wrong</div>; return <button onClick=dispatchSomeMutation disabled=loading> Send mutation loading && '...' </button> ; }</Mutation>
Licence
MIT