[Recompose] Flatten a Prop using Recompose

Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.

For example,we have a 'redux-react' like app:

import React from 'react';
import { withProps } from 'recompose';

// Mock Configuration
function ReactRedux() {
    const state = {
        name: 'Joe',
        status: 'active'
    };
    return {
        connect: (map) => withProps(map(state))
    };
}

const {connect} = ReactRedux();

const UserStyle = {
    position: 'relative',
    background: 'lightblue',
    display: 'inline-block',
    padding: '10px',
    cursor: 'pointer',
    marginTop: '50px'
};

const mapStateToProps = (state) => ({
    name: state.name,
    status: state.status
});

let User4 = ({ status, name }) => (
    <div style={UserStyle}>
        {name} - {status}
    </div>
);

User4 = connect(mapStateToProps)(User4);

export default User4;

Here we using 'connect' & 'mapStateToProps'. 'connect' is also a HoC.

import React from 'react';
import { withProps, compose, flattenProp } from 'recompose';

// Mock Configuration
function ReactRedux() {
    const state = {
       user: {
           name: 'Joo',
           status: 'inactive'
       },
       address: {
           street: 'SF',
           postcode: '10101'
       }
    };
    return {
        connect: (map) => withProps(map(state))
    };
}

const {connect} = ReactRedux();

const UserStyle = {
    position: 'relative',
    background: 'lightblue',
    display: 'inline-block',
    padding: '10px',
    cursor: 'pointer',
    marginTop: '50px'
};

const mapStateToProps = (state) => ({
    user: state.user,
    address: state.address
});

const enhance = compose(
    connect(mapStateToProps),
    flattenProp('user')
);

let User4 = enhance(({ name, status, address }) => (
    <div style={UserStyle}>
        {name} - {status} - {address.street} - {address.postcode}
    </div>
));


export default User4;