connect
deprecated in favour of useMappedState and useRequest
Convenience HoC that connects withState and withRequest. Also offers a way to create actions and a reducer.
Installation
npm install --save @app-elements/connect
Usage
import connect from '@app-elements/connect'
// Here is are view for rendering that data
const PeopleList = ({ result }) =>
<div>
// Do something with `result`
</div>
// Now we use connect to wrap the PeopleList component
// in a Higher order Component (HoC) that, in this case,
// will sync state changes and perform an API request.
const enhance = connect({
// Let's say we have another Component somewhere that let's
// the user specify filter options for what people to display.
withState: ({ peopleFilters }) => ({ peopleFilters }),
withRequest: {
// We will use the state property we accessed with `withState`
// to modify the endpoint we want to request.
endpoint: ({ peopleFilters }) => ({
endpoint: `users?${qs.stringify(peopleFilters, '', true)}`
})
}
})
// Since connect is a HoC, it returns a function that expects
// to be called with a Component as its only param.
export default enhance(PeopleList)
withActions
A convenient way to define actions and automatically create a reducer that handles them. The reducer is only defined once and passed to the store once.
const Dropdown = connect({
// Each property on this object will result in a function of the same name
// being created and included in the props given to the PassedComponent.
withActions: {
// Each value should be a function that accepts `(currentState, [...args])`
// `args` will be any arguments you provide when you call the function in
// your PassedComponent. For example, on a click handler you would call:
// `toggle(this.props.uid)`
toggle: ({dropdown}, uid) => {
const isOpen = dropdown === uid
return {dropdown: isOpen ? null : uid}
}
},
})(DropdownView)
Props
Prop | Type | Default | Description |
---|---|---|---|
withActions |
Object | None | An object where each child is a function that returns an object to mutate state with |
withState |
Function | None | A function that accepts (state, props) and returns an object |
withRequest |
Object | None | An object that accepts the props { endpoint, parse } , where endpoint is the url to call, or a function that returns a the url to call |