Function

@connect([{store: MyStore, props: ['myValue', 'anotherValue']}])
export default class MyComponent extends React.Component {
     render() {
         const {myValue, anotherValue} = this.props;
         ...
     }
}

You can rename props using the ` as ` alias syntax

@connect([{
     store: PeopleStore,
     props: ['items as people']
}, {
     store: ProductStore,
     props: ['items as products']
}])
export default class MyComponent extends React.Component {
     render() {
         // this.props.people, this.props.products, ...
     }
}

### Function notation

Use mapper functions instead of strings in order to manually retrieve store values.
The function receives the store state and the component props.

@connect([{
     store: MyStore,
     props: (state, props) => {
         return {
             item: state.get('items').filter(item => item.get('id') === props.id)
         }
     }
}])
export default class MyComponent extends React.Component {
     render() {
         const item = this.props.item;
     }
}

Technically, you could also mix all access methods, but this defeats the purpose of simple access:

@connect([{
     store: MyStore,
     props: ['someProp', 'anotherProp', (state, props) => {
         return {
             item: state.get('items').filter(item => item.get('id') === props.id)
         }
     }, 'some.nested.value as foo']
}])
export default class MyComponent extends React.Component {
     ...
}

There are however valid usecase for mixing access methods. For example, you might have keys that themselves contain dots.
For example, that is the case when using `validate.js` with nested constraints and keeping validation results in the store.
There might be an `errors` map in your storewith keys like `user.address.street`. In such a case you wouldn't be able to access those values because the dots do not
represent the actual keyPath in the tree:

@connect([{
  store,
  props: ['user.address.street', (state) => ({errors: state.getIn(['errors', 'user.address.street'])})]
}])