How to model transient events in React/Redux?

Question

While React with Redux is excellent at modeling UI state, there are occasionally situations where something just happens, the UI needs to handle that event in a discrete procedural way, and it doesn’t make sense to think of that transient event as a piece of state that would persist for any period of time.

Two examples, from a JS Bin-like code editor application:

• A user exports their code to a GitHub gist. When the export is complete, we want to open a new browser window displaying the gist. Thus, the React component hierarchy needs to know the ID of the gist, but only at a single moment in time, at which point it will open the window and stop caring about the gist export altogether.
• A user clicks on an error message, which causes the editor to bring the line where the error occurred into focus in the editor. Again, the UI only cares about which line needs to be focused for a single moment in time, at which point the (non-React-based) editor is told to focus the line, and the whole thing is forgotten about.

The least unsatisfying solution I’ve come up with is:

• When the triggering event occurs, dispatch an action to update the Redux state with the needed information (gist ID, line to focus)
• The React component that’s interested in that information will monitor the appropriate props in a lifecycle hook (componentWillReceiveProps etc.). When the information appears in its props, it takes the appropriate action (loads the gist window, focuses the editor on the line)
• The component then immediately dispatches another event to the Redux store essentially saying, “I’ve handled this”. The transient event data is removed from Redux state.

Is there a better pattern for this sort of situation? I think one perhaps fundamental part of the picture is that the UI’s response to the action always breaks out of the React component structure—opening a new window, calling a method on the editor’s API, etc.

Answer 1

Your solution would certainly work, but these sorts of problems you bring up don't sound particularly well suited to be handled with redux at all. Just using plain React and passing the necessary functions to your component sounds a lot more natural to me.

For the export case, for instance, rather than dispatching an action which updates some state, which then triggers the new window to open, why not just open the new window in place of dispatching that action? If you have the info necessary to dispatch an action to trigger opening a window, you ought to be able to just open the window in the same place.

For the example where clicking an error message triggers calling a non-React, imperative api, pass a function from the nearest common parent of the error message and the editor. The parent can also maintain a ref to the wrapper around the editor. Even if it's multiple levels deep, it's not too bad to get a ref to what you want if you pass down a function to set the ref. Thus, the function passed down from the parent to the error message component can simply call a method on the ref it maintains to the editor. Basically, something like this:

class Parent extends Component {
    constructor(...args) {
        super(...args)

        this.onErrorMessageClick = this.onErrorMessageClick.bind(this)
    }

    onErrorMessageClick(lineNumber) {
        if (this.editor) {
            this.editor.focusOnLine(lineNumber)
        }
    }

    render() {
        return (
            <div>
                <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 1 } />
                <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 2 } />
                <EditorWrapper editorRef={ (editor) => { this.editor = editor } } />
            </div>
        )
    }
}

const ErrorMessage = ({ onClick, lineNumber }) => (
    <button onClick={ () => onClick(lineNumber) }>
        { `Error Message For ${lineNumber}` }
    </button>
)

// Just adding EditorWrapper because your editor and error messages probably aren't right next to each other
const EditorWrapper = ({ editorRef }) => <Editor ref={ editorRef } />

class Editor extends Component {
    focusOnLine(lineNumber) {
        // Tell editor to focus on the lineNumber
    }

    render() {
        ...
    }
}

Answer 2

I often use redux-thunk for these types of events.

Essentially, its not different to setting up a normal thunk, only I don't dispatch an action in it.

const openGist = (id) => () => {
    // code to open gist for `id`
}

I then use this action creator like I would any other from the component triggering it, e.g. mapped in mapDispatchToProps and called in an onClick handler.

A common question I get asked is why don't I just put this code straight into the component itself, and the answer is simple - testability. It is far easier to test the the component if it doesn't have events that cause side effects and it's easier to test code that cause side effects in isolation to anything else.

The other advantage is that more often than not, the UX designers will step in at some point and want some kind of feedback to the user for some of the events of this nature (e.g. briefly highlight the error row) so adding an X_COMPLETED action to the event is much easier at this point.