thk2b / react-xcontrol Goto Github PK

This HOC takes a React.Component or a stateless functional Component and turns it into a controller. When the controller's state changes, the component is re-rendered. The controller's state is destructured as props to the Component.

Any other decorator can now connect to this component.

export default computed({ todos })(
    ({ todos}) => ({ items: todos.filter(t => t.done )})
)(connect(List))

The VisibleTodos component should now receive todos as props.

see thk2b/xcontrol#14

The Model uses the 'state' name to store its data. This means that a Controller cannot extend a React.Component as desired. This is because React uses state getters/setters internally. Simply renaming 'state' to 'store' solves the issue and permits:

const actions = {
     add: messages.add, remove: messages.remove, edit: messages.edit
}

const mapState = ({ messages }) => ({
    messages: messages.visible()
})

export default computed( mapState,
   withActions( actions,
        control( List )
    )
)({ messages }),

thk2b/xcontrol#29

writing controller.action.bind(controller) is repetitive.

bindActionsToController({ actionName: controller.action, ...})