Add 'value' prop and update helper components to use the new status props.

Author: ghengeveld

README.md

@@ -391,6 +391,7 @@ is set to `"application/json"`.
 
 - `data` Last resolved promise value, maintained when new error arrives.
 - `error` Rejected promise reason, cleared when new data arrives.
+- `value` The value of `data` or `error`, whichever was last updated.
 - `initialValue` The data or error that was provided through the `initialValue` prop.
 - `startedAt` When the current/last promise was started.
 - `finishedAt` When the last promise was fulfilled or rejected.
@@ -419,6 +420,12 @@ Last resolved promise value, maintained when new error arrives.
 
 Rejected promise reason, cleared when new data arrives.
 
+#### `value`
+
+> `any | Error`
+
+The data or error that was last provided (either through `initialValue` or by settling a promise).
+
 #### `initialValue`
 
 > `any | Error`

src/Async.js

@@ -7,6 +7,8 @@ try {
 } catch (e) {}
 
 const isFunction = arg => typeof arg === "function"
+const renderFn = (children, ...args) =>
+  isFunction(children) ? children(...args) : children === undefined ? null : children
 
 /**
  * createInstance allows you to create instances of Async that are bound to a specific promise.
@@ -186,12 +188,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    */
   const Initial = ({ children, persist }) => (
     <Consumer>
-      {state => {
-        if (state.data !== undefined) return null
-        if (!persist && state.isPending) return null
-        if (!persist && state.error !== undefined) return null
-        return isFunction(children) ? children(state) : children || null
-      }}
+      {state => (state.isInitial || (persist && !state.data) ? renderFn(children, state) : null)}
     </Consumer>
   )
 
@@ -206,15 +203,11 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    * Renders only while pending (promise is loading).
    *
    * @prop {Function|Node} children Function (passing state) or React node
-   * @prop {boolean} initial Show only on initial load (data is undefined)
+   * @prop {boolean} initial Show only on initial load (data/error is undefined)
    */
   const Pending = ({ children, initial }) => (
     <Consumer>
-      {state => {
-        if (!state.isPending) return null
-        if (initial && state.data !== undefined) return null
-        return isFunction(children) ? children(state) : children || null
-      }}
+      {state => (state.isPending && (!initial || !state.value) ? renderFn(children, state) : null)}
     </Consumer>
   )
 
@@ -233,12 +226,9 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    */
   const Fulfilled = ({ children, persist }) => (
     <Consumer>
-      {state => {
-        if (state.data === undefined) return null
-        if (!persist && state.isPending) return null
-        if (!persist && state.error !== undefined) return null
-        return isFunction(children) ? children(state.data, state) : children || null
-      }}
+      {state =>
+        state.isFulfilled || (persist && state.data) ? renderFn(children, state.data, state) : null
+      }
     </Consumer>
   )
 
@@ -257,11 +247,9 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    */
   const Rejected = ({ children, persist }) => (
     <Consumer>
-      {state => {
-        if (state.error === undefined) return null
-        if (state.isPending && !persist) return null
-        return isFunction(children) ? children(state.error, state) : children || null
-      }}
+      {state =>
+        state.isRejected || (persist && state.error) ? renderFn(children, state.error, state) : null
+      }
     </Consumer>
   )
 
@@ -276,15 +264,11 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
    * Renders only when promise is fulfilled or rejected.
    *
    * @prop {Function|Node} children Function (passing state) or React node
-   * @prop {boolean} persist Show old data or error while pending (promise is loading)
+   * @prop {boolean} persist Continue rendering while loading new data
    */
   const Settled = ({ children, persist }) => (
     <Consumer>
-      {state => {
-        if (state.isInitial) return null
-        if (state.isPending && !persist) return null
-        return isFunction(children) ? children(state) : children || null
-      }}
+      {state => (state.isSettled || (persist && state.value) ? renderFn(children, state) : null)}
     </Consumer>
   )
 

src/Async.spec.js

@@ -189,6 +189,22 @@ describe("Async.Settled", () => {
     await waitForElement(() => getByText("err"))
     expect(queryByText("err")).toBeInTheDocument()
   })
+
+  test("renders while loading new data and persist=true", async () => {
+    const promiseFn = () => resolveTo("value")
+    const { getByText, queryByText } = render(
+      <Async initialValue="init" promiseFn={promiseFn}>
+        <Async.Pending>
+          <Async.Settled persist>loading</Async.Settled>
+        </Async.Pending>
+        <Async.Settled>{({ reload }) => <button onClick={reload}>reload</button>}</Async.Settled>
+      </Async>
+    )
+    expect(queryByText("loading")).toBeNull()
+    fireEvent.click(getByText("reload"))
+    await waitForElement(() => getByText("loading"))
+    expect(queryByText("loading")).toBeInTheDocument()
+  })
 })
 
 describe("createInstance", () => {

src/index.d.ts

@@ -34,6 +34,7 @@ export type AsyncInitial<T> = AbstractState<T> & {
   initialValue?: undefined
   data: undefined
   error: undefined
+  value: undefined
   startedAt: undefined
   finishedAt: undefined
   status: "initial"
@@ -48,6 +49,7 @@ export type AsyncInitial<T> = AbstractState<T> & {
 export type AsyncPending<T> = AbstractState<T> & {
   data: T | undefined
   error: Error | undefined
+  value: T | Error | undefined
   startedAt: Date
   finishedAt: undefined
   status: "pending"
@@ -62,6 +64,7 @@ export type AsyncPending<T> = AbstractState<T> & {
 export type AsyncFulfilled<T> = AbstractState<T> & {
   data: T
   error: undefined
+  value: T
   startedAt: Date
   finishedAt: Date
   status: "fulfilled"
@@ -76,6 +79,7 @@ export type AsyncFulfilled<T> = AbstractState<T> & {
 export type AsyncRejected<T> = AbstractState<T> & {
   data: T | undefined
   error: Error
+  value: Error
   startedAt: Date
   finishedAt: Date
   status: "rejected"

src/reducer.js

@@ -11,6 +11,7 @@ export const init = ({ initialValue, promise, promiseFn }) => ({
   initialValue,
   data: initialValue instanceof Error ? undefined : initialValue,
   error: initialValue instanceof Error ? initialValue : undefined,
+  value: initialValue,
   startedAt: promise || promiseFn ? new Date() : undefined,
   finishedAt: initialValue ? new Date() : undefined,
   ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn)),
@@ -39,6 +40,7 @@ export const reducer = (state, { type, payload, meta }) => {
       return {
         ...state,
         data: payload,
+        value: payload,
         error: undefined,
         finishedAt: new Date(),
         ...getStatusProps(statusTypes.fulfilled),
@@ -47,6 +49,7 @@ export const reducer = (state, { type, payload, meta }) => {
       return {
         ...state,
         error: payload,
+        value: payload,
         finishedAt: new Date(),
         ...getStatusProps(statusTypes.rejected),
       }