
Let’s start off with the problem. I manage a few popular form libraries, and I
often get the question:

> How can I use `redux-saga` or `redux-observable` to submit my form via a
> side-effect?

I have to answer, “Well… the form library is expecting the `onSubmit` function
to return a `Promise` to know when it is submitting, so...” At least with
[Redux Form](https://redux-form.com/), because all of its state was managed in
Redux, including whether or not the form was currently being submitted, it was
possible to let users _dispatch_ the `START_SUBMIT` and `STOP_SUBMIT` actions
themselves, rather than allowing Redux Form to manage that for them via the
`Promise`. But, if you
[take your form state out of Redux](/blog/final-form-announcement), you’re just
sort of screwed…

<div style={{ textAlign: "center" }}>
  <img
    src="/images/cry-emoji.png"
    alt="Crying emoji"
    width={120}
    height={120}
  />
</div>

### Until now.

<div style={{ textAlign: "center" }}>
  <img
    src="/images/sweat-smile-emoji.png"
    alt="Sweat-Smile emoji"
    width={120}
    height={120}
  />
</div>

---

What if you had a way to create an asynchronous function that dispatched a START
action when it was called, and resolved or rejected the returned `Promise` when
either a `RESOLVE` or `REJECT` action was dispatched? That would totally solve
this problem. Right?

## 💥 React Redux Promise Listener 💥

The name is not the catchiest on NPM, but... I’ve just released
[React Redux Promise Listener](https://github.com/erikras/react-redux-promise-listener#react-redux-promise-listener),
a library that solves just this problem. The API looks something like this:

```jsx
<MakeAsyncFunction
  listener={promiseListener}
  start="START_ACTION_TYPE" // the type of action to dispatch when this function is called
  resolve="RESOLVE_ACTION_TYPE" // the type of action that will resolve the promise
  reject="REJECT_ACTION_TYPE" // the type of action that will reject the promise
>
  {(asyncFunc) => (
    <SomeFormLibrary onSubmit={asyncFunc}>
      ...
      <button type="submit">Submit</button>
    </SomeFormLibrary>
  )}
</MakeAsyncFunction>
```

The `promiseListener` comes from a piece of Redux middleware that must be
installed. By default, the values passed around are kept in `action.payload`,
but there are config options that let you read and write those from anywhere in
the actions.

## Conclusion

It should be a lot easier now to use async side-effect Redux libraries with
other async components, like routers, that were built on the assumption of
Promises being “how async is done” in Javascript.

❤️ Enjoy! ❤️


Getting a Promise from Redux Actions


There are times, when writing a large scale React application in which one
component needs to send a message to another component that it is not a direct
descendent or ancestor of, a cousin component, if you will. Two examples that
spring to mind are:

1. Needing to apply focus to a particular DOM node, which requires a ref to the
   actual DOM node.
2. Needing to make some AJAX call, e.g. submitting a form, using information the
   receiving component has in its props.

Luckily, if you are writing a large enough React application, you are probably
already using some sort of global state management, such as Redux. That’s great,
so you have a common state that both components can read from and write to, but
how does that help you pass a message? That’s where the world of international
espionage comes in…

Draw the curtain and take a seat, Mr. Bond.

To quote Wikipedia:

> A **dead drop** or **dead letter** box is a method of espionage tradecraft
> used to pass items or information between two individuals (e.g., a case
> officer and agent, or two agents) using a secret location, thus not requiring
> them to meet directly and thereby maintaining operational security. The method
> stands in contrast to the live drop, so-called because two persons meet to
> exchange items or information.

<div style={{ textAlign: "center" }}>
  <img src="/images/booksafe.jpg" width={590} height={443} alt="Book Safe" />
</div>

<caption>
  Image from{" "}
  <a href="http://chadchandler.com/diy-book-safe/" target="_blank">
    Chad Chandler
  </a>
</caption>

You already see where this is going, don’t you? The sending component needs to
dispatch an action that will set some slice of the state that the receiving
component is listening to. The flow goes like this:

1. User interacts with **Sender**
2. **Sender** dispatches an action to modifiy `state.deaddrop` to `true` or to
   any value that it wants to pass with the message.
3. **Receiver** has `mapStateToProps` with a selector for `state.deaddrop`, and
   thus gets rerendered with a new prop.
4. **Receiver** initiates whatever action is required.

It is important to note here that the flow does not _need_ to begin with a user
interaction. With the rise of asynchronous middleware like `redux-saga` and
`redux-observable`, the ability to trigger any code on a component anywhere is
very useful.

<div style={{ textAlign: "center" }}>
  <img
    src="/images/redux-dead-drop-logo.jpg"
    width={308}
    height={311}
    alt="Redux Dead Drop Logo"
  />
</div>

<caption>redux-dead-drop logo</caption>

## Implementation

I briefly considered writing a `redux-dead-drop` library, even going so far as
“designing” a logo, with its own higher order reducer to enable this
functionality on any reducer and a HOC to connect any component the dead drop
location on the reducer, and even have it call an instance method on its wrapped
component. I'm still reasonably certain that it would be possible to write, but
the design pattern is so simple that it takes hardly any effort to implement it
on any existing reducer, so I rejected abstraction for abstraction's sake.

If you would like to try and implement such a library, help yourself to the name
and logo.

As in the world of covert government agents, is important that the Receiver
component clear out the dead drop once the message has been received.

I have used this pattern in my [`redux-form`](https://redux-form.com) library to
enable the triggering of a form submission via the dispatch of an action. This
allows the form component to know about how it needs to be submitted and
validated, but also allows any actor in the entire application to trigger the
submission.

This post will self destruct in 5…. 4…. 3….


Redux Dead Drop


With the rise of Higher Order Component composition in the React community,
there are a plethora of libraries, such as my own
[`redux-form`](https://redux-form.com), that will add functionality to your
application by decorating your component and wrapping it in a HOC.

What you end up with is a component structure like this, where you control the
yellow components, `MyContainer` and `MyWrappedComponent`, but you have no
control over the red code, LibraryHOC.

<img
  src="/images/wrapped-hoc.png"
  alt="Wrapped Components Diagram"
  width={1000}
  height={496}
/>

Most such libraries are polite enough to pass through any props that they do not
use as parameters down to your wrapped component, but sometimes they will not
provide a way, e.g. getWrappedInstance, to access instance methods on your
wrapped component.

What can you do? How can you get through this barrier?

## Concrete Example

Let’s lay out a concrete example. Your MyWrappedComponent has instance methods
of load(), save(), and clear(), and you need buttons in your MyContainer to be
able to call these.

```jsx
// MyContainer.js
import React, { Component } from "react";
import MyWrappedComponent from "./MyWrappedComponent";

export default class MyContainer extends Component {
  constructor() {
    // bind handlers
    this.handleLoad = this.handleLoad.bind(this);
    this.handleSave = this.handleSave.bind(this);
    this.handleClear = this.handleClear.bind(this);
  }

  handleLoad() {
    // somehow call load() on MyWrappedComponent
  }

  handleSave() {
    // somehow call save() on MyWrappedComponent
  }

  handleClear() {
    // somehow call clear() on MyWrappedComponent
  }

  render() {
    return (
      <div>
        <button onClick={this.handleLoad}>Load</button>
        <button onClick={this.handleSave}>Save</button>
        <button onClick={this.handleClear}>Clear</button>
        <MyWrappedComponent />
      </div>
    );
  }
}
```

```jsx
// MyWrappedComponent.js
import React, { Component } from "react";
import { hocLibrary } from "some-hoc-library";

@hocLibrary({ config: "parameters" })
export default class MyWrappedComponent extends Component {
  load() {
    // load something
  }

  save() {
    // save something
  }

  clear() {
    // clear something
  }

  render() {
    return <div>Gorgeous UI</div>;
  }
}
```

How can MyContainer drill through the HOC to call methods on
`MyWrappedComponent`?

<div style={{ textAlign: "center" }}>
  <img
    src="/images/drill.gif"
    alt="Wrapped Components Diagram"
    width={362}
    height={360}
  />
</div>

<caption>This HOC is tough!</caption>

## Callback Drill

Because our HOC allows us to pass props down through it, we can pass a callback
that will give our container component references to the wrapped component’s
instance methods.

Let’s see that in action. When the inner `MyWrappedComponent` is going to be
mounted, it sends up the API that it wants to expose to `MyContainer`.

```jsx
// MyContainer.js
import React, { Component } from "react";
import MyWrappedComponent from "./MyWrappedComponent";

export default class MyContainer extends Component {
  constructor() {
    // bind handlers
    this.handleCallback = this.handleCallback.bind(this);
  }

  handleCallback(load, save, clear) {
    // save instance methods from MyWrappedComponent to this
    this.handleLoad = load;
    this.handleSave = save;
    this.handleClear = clear;
  }

  render() {
    return (
      <div>
        <button onClick={this.handleLoad}>Load</button>
        <button onClick={this.handleSave}>Save</button>
        <button onClick={this.handleClear}>Clear</button>
        <MyWrappedComponent methodCallback={this.handleCallback} />
      </div>
    );
  }
}
```

```jsx
// MyWrappedComponent.js
import React, { Component } from "react";
import { hocLibrary } from "some-hoc-library";

@hocLibrary({ config: "parameters" })
export default class MyWrappedComponent extends Component {
  componentWillMount() {
    this.props.methodCallback(
      this.load.bind(this),
      this.save.bind(this),
      this.clear.bind(this)
    );
  }

  load() {
    // load something
  }

  save() {
    // save something
  }

  clear() {
    // clear something
  }

  render() {
    return <div>Gorgeous UI</div>;
  }
}
```

## Conclusion

It is a little messy, but breaking through barriers often is. I have used this
pattern on several occasions, and it works well. One important side note: If
your wrapped component might be unmounted while your container remains, to
prevent a memory leak, you should “unregister” the instance methods via another
callback in `componentWillUnmount()`.

Happy coding!


Redux

Posted in Redux