Redux Waiter
Installation
npm i redux-waiter --save
This gives you access to the reducer, constants, actions, and selectors available.
Add to your combineReducers()
; const initialState = ; const store = ;
NOTE: Ensure you have redux-thunk configured as middleware in your store implementation
Waiter model description and defaults
Each waiter initialized will have these properties.
const model = // incremented after each request id: 0 // your waiter's name name: null // your request to track requestCreator: null // the params for your request to use params: null // the promise returned from the requestCreator request: null // the result of the promise response: null // the error if returned from the promise error: null // true if the request is called a second time and isPending isRefreshing: false // true when the request is pending isPending: false // true when the request returns an error isRejected: false // true when the request returns successfully isResolved: false // true if the request resolves or rejects isCompleted: false // true if the request is canceled isCanceled: false // true if the request rejected, and is being called again isRetrying: false // start time of request in milliseconds UTC startTime: null // end time of request in milliseconds UTC endTime: null // difference in milliseconds of start and end times elapsedTime: null // last time the model changed in milliseconds UTC lastModified: null // how many times the request has been called and returned an error // resets after a successful response attempts: 0;
connectWaiter
import { connectWaiter } from 'redux-waiter'
connectWaiter is a higher-order-component that connects your waiter promise to another component. You can listen in on waiter events and dispatch other actions. You can add custom views to different waiter states, as well as add custom actions to the mount and unmount lifecycle events
Below is the full interface for connectWaiter, ordered in the sequence that the actions take place
;;; const SearchRequestForm = MyComponent;
Actions
callWaiter(waiterName, { params, requestCreator })
The call action will invoke the requestCreator with the supplied params and store all waiter processes to the waiterName given.
; ;
prepareWaiter(waiterName, { params, requestCreator })
Prepare is the same as callWaiter, but it will only store up the params and request creator to the waiterName. It will not invoke the requestCreator until callWaiter(waiterName) is dispatched
import { prepareWaiter } from 'redux-waiter'
dispatch(
prepareWaiter('get-toy', {
requestCreator: (params) => getToyPromise(params.id),
params: { id: '1'}
})
)
// then somewhere else you can call it
dispatch(callWaiter('get-toy'))
clearWaiter(waiterName)
Clear will reset the waiter as if it was never called. This removes all params, response, and error data. The waiter stays in the store and can be used again.
; // In your redux environment;
clearAll()
Clear all the waiters in the store.
; // In you redux environment;
destroyWaiter(waiterName)
Destroy will remove the waiter from the store. It will not longer be accessible unless initialized again.
; // In you redux environment;
destroyAll()
Destroy all the waiters in the store.
; // In you redux environment;
Selectors
getWaiter(state, waiterName)
Get the waiter model from the store by it's name.
; // In your mapStateToProps somewhere ;
getWaiterResponse(state, waiterName)
Get only the response of the promise by the waiter name. Returns null if no response has been set.
; // In your mapStateToProps somewhere ;
getWaiterError(state, waiterName)
Get only the error of the promise by the waiter name. Returns null if no error has been set.
; // In your mapStateToProps somewhere ;
Example
Valid Document Link
Create your component with the connectWaiter
;; ; const ValidUrlLink = <a href=propsurl>Click to View</a>;
Implement your component in the JSX
... ' ...
Dependencies
Due to the asynchronous nature of this library, redux-waiter requires that you have redux-thunk configured as middleware for your store.