Gutenberg: Consider state middleware injection as extensibility mechanism

[aduth]

Related: #594

In #594, when a post draft finishes saving, we adjust the current browser URL to reflect the new post ID. While this is necessary in the context of the dedicated editor screen, this reduces the portability of the editor as these URL changes are not applicable outside this context. If we'd want to allow initializing an editor on other screens (e.g. front-end, Customizer), we might need to explore options for injecting context-specific middlewares. This could serve as a generic extensibility pattern for any side effects of state changes.

For the post save navigation example, this could look something like:

wp.editor.injectMiddleware( ( store ) => ( next ) => ( action ) => {
    const { type, isNew, post } = action;
    if ( 'REQUEST_POST_UPDATE_SUCCESS' === type ) {
        const [ baseUrl, query ] = window.location.href.split( '?' );
        const qs = parse( query || '' );
        const newUrl = baseUrl + '?' + stringify( {
            ...qs,
            post_id: newPost.id,
        } );
        window.history.replaceState( {}, 'Post ' + newPost.id, newUrl );
    }

    return next( action );
} );

See also:

• http://redux.js.org/docs/advanced/Middleware.html
• https://hyper.is/#extensions-api (middleware)

[dmsnell]

Check out automattic/notifications-panel and how we do this to integrate with automattic/wp-calypso

injecting the enhancers

default actions for iframe mode

custom integrations in Calypso

it's been working incredibly well, by the way

[gziolo]

8 months passed and we still need it 😃 We had a major refactoring in the way we handle data, but middlewares still play an important role. We could explore whether hooks library would be a good fit here. We might inject additional middlewares using filters in here: https://github.com/WordPress/gutenberg/blob/master/editor/store/middlewares.js#L40. @youknowriad suggested to make in an internal API for start.

[aduth]

This is superseded by new patterns with data module: Notably the subscribe and withSelect APIs, which allow a developer to observe for and react to changes over time: https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md