State: Migrate lib/post-formats to Redux state

[tyxla]

This PR migrates the legacy lib/post-formats Flux store to Redux. It fixes #7925 and is part of the group effort to use a single data tree and query components throughout Calypso - #5046.

This PR introduces:

• Action creators
• Reducer
• Selectors
• Schema
• Query components - QueryPostFormats

Tests are also included.

To test:

• Run npm run test-client client/state/post-formats and verify all tests pass ✅

Implementation of this and removal of the old Flux store will be done in the subsequent PR(s).

/cc @aduth for review

[matticbot]

Test live: https://calypso.live/?branch=add/redux-post-formats

[aduth]

It's probably fine here since there's only a single export anyways, but in generally we should avoid import * as since it can't be optimized with future tree shaking in Webpack 2.

[tyxla]

Makes sense. It's a good time to rename the exported schema object to something more unique anyway.

[aduth]

The createReducer utility can be handy to avoid some of the boilerplate associated with schema validation in reducers. By default, if there's no schema defined, it will always return initial state, else perform the validation for you.

[tyxla]

Nifty, thanks!

[aduth]

Unsure if it was intentionally not used for the requesting reducer, but the nice thing is if you use it without a schema, it will return the default initial state for you, so this could be simplified to:

export const requesting = createReducer( {}, {
    [ POST_FORMATS_REQUEST ]: ( state, { siteId } ) => ( { ...state, [ siteId ]: true } ),
    [ POST_FORMATS_REQUEST_SUCCESS ]: ( state, { siteId } ) => ( { ...state, [ siteId ]: false } ),
    [ POST_FORMATS_REQUEST_FAILURE ]: ( state, { siteId } ) => ( { ...state, [ siteId ]: false } )
} );

[aduth]

This might be a little too strict. Can post formats have dashes or underscores in their name?

[tyxla]

Good catch there. Post formats are actually taxonomy terms, and their ID is actually the term slug. Term slugs are limited by sanitize_title_with_dashes(), which means they can also contain dashes and underscores.

[tyxla]

@aduth Thanks for the review - I've addressed your suggestions and this is ready for a new review.

[aduth]

Unsure if it was intentionally not used for the requesting reducer, but the nice thing is if you use it without a schema, it will return the default initial state for you, so this could be simplified to:

export const requesting = createReducer( {}, {
    [ POST_FORMATS_REQUEST ]: ( state, { siteId } ) => ( { ...state, [ siteId ]: true } ),
    [ POST_FORMATS_REQUEST_SUCCESS ]: ( state, { siteId } ) => ( { ...state, [ siteId ]: false } ),
    [ POST_FORMATS_REQUEST_FAILURE ]: ( state, { siteId } ) => ( { ...state, [ siteId ]: false } )
} );

[aduth]

For this to be active in Redux state, we need to include the default reducer in the combined reducer of client/state/index.js .

[tyxla]

Sure, I was thinking to do this in the subsequent PR where we implement this into the components, but it's fine to do it here as well.

[tyxla]

@aduth I think we should be ready to go, unless you have other suggestions.

[aduth]

LGTM 👍

[aduth]

Thanks for fixing the order 👍