How to use the preact-redux.connect function in preact-redux

dispatch(resetProfile(mode, profileGroupName));
  }
});

const mergeProps = (stateProps, dispatchProps, ownProps) => (
  Object.assign({}, stateProps, dispatchProps, {
    onOptionChange: dispatchProps.onOptionChange(stateProps.name, stateProps.selectedProfile),
    onProfileChange: dispatchProps.onProfileChange(stateProps.name),
    onProfileNew: dispatchProps.onProfileNew(stateProps.name),
    onProfileDelete: dispatchProps.onProfileDelete(stateProps.name),
    onProfileDuplicate: dispatchProps.onProfileDuplicate(stateProps.name),
    onProfileRename: dispatchProps.onProfileRename(stateProps.name),
    onProfileReset: dispatchProps.onProfileReset(stateProps.name)
  })
);
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SettingsCard);

// TODO: make sure to remove these comments
// modes: Array<{ modeName, modeDescription, Array<{ type, key, label, {...other} }>>
// settings: { [modeName]: Array<{ profileName, settings: { [key]: values } }>
// profileGroups: Array<{ profileGroupName, settings: { [modeName]: profileName }
// activeProfileGroup: string
// selectedProfileForMode: { [modeName]: profileName } ** NOT PERSISTED LIKE THE OTHERS, lives only as long as options GUI

import { IconUndo } from './control-items/icon-undo'
import { IconRedo } from './control-items/icon-redo'
import { IconSelect } from './control-items/icon-select'
import { IconConnect } from './control-items/icon-connect'
import { IconToFront } from './control-items/icon-to-front'
import { IconToBack } from './control-items/icon-to-back'
import { IconExport } from './control-items/icon-export'
import { IconImport } from './control-items/icon-import'
import { IconGenerateSQL } from './control-items/icon-generate-sql'
import { IconScreenshot } from './control-items/icon-screenshot'
import { IconGenerateGraph } from './control-items/icon-generate-graph'
// import { IconOpenTool } from './control-items/icon-open-tool'

import sqlGenerator from './sql-generator'

@connect()
class Controls extends Component {
    @bind
    zoomNormal() {
        this.props.dispatch({type: ACTION.ZOOM_NORMAL})
    }

    @bind
    zoomIn() {
        this.props.dispatch({type: ACTION.ZOOM_IN})
    }

    @bind
    zoomOut() {
        this.props.dispatch({type: ACTION.ZOOM_OUT})
    }

//           Address {
    //             country
    //             countryCode
    //           }
    //         }
    //       }
    //     `
    //     })
    //   )
  }
};

/**
 * Export the container component.
 */
export default connect(
  mapStateToProps,
  mapDispatchToProps,
  null, {
    pure: false
  }
)(App);

fetch(account()+"/account/login", {
		method: "POST",
		body: fd,
		cors: true,
	}).then((resp) => {
		return resp.json();
	}).then((data) => {
		store.dispatch(
			actions.authenticated(data.success)
		)
	}).catch((error) => {
		console.log(error);
	})
}

@connect(reduce, actions)
export default class Login extends Component {
	submit = (event) => {
		event.preventDefault();
		login();
		return false;
	}

	render = ({ ...state }, { text }) => {
		return (
      <div>
        
          
            
        			
          			
            			Login</div>

body: fd,
		cors: true,
	}).then((resp) => {
		return resp.json();
	}).then((data) => {
		localStorage.setItem("user", JSON.stringify({token: data.success}));
		store.dispatch(
			actions.authenticated(data.success)
		)
		route("/", true);
	}).catch((error) => {
		console.log(error);
	})
}

@connect(reduce, actions)
export default class Register extends Component {
	submit = (event) => {
		event.preventDefault();
		register();
		return false;
	}

	render = ({ ...state }, { text }) => {
		return (
      <div>
        
          
            
        			
          			
            			Register</div>

onProfileDelete: (profileGroupName) => {
    dispatch(deleteProfileGroup(profileGroupName));
  },
  onProfileDuplicate: (profileGroupName) => {
    dispatch(duplicateProfileGroup(profileGroupName));
  },
  onProfileRename: (oldProfileGroupName, newProfileGroupName) => {
    dispatch(renameProfileGroup(oldProfileGroupName, newProfileGroupName));
  }
});
const mergeProps = (stateProps, dispatchProps, ownProps) => (
  Object.assign({}, stateProps, dispatchProps, {
    onOptionChange: dispatchProps.onOptionChange(stateProps.selectedProfile)
  })
);
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SettingsCard);

{asJS(props.notes.map((note, i) => ))}
      
    );
  }
}

const mapStateToProps = createStructuredSelector({
  notes: user.selectors.getOrderedUserNotes,
  userName: user.selectors.getUsername
});

const mapDispatchToProps = {
  requestApiCallAction: connectivity.actions.requestApiCall,
};

export default connect(mapStateToProps, mapDispatchToProps)(Notes);

return (
      <div>
        
        <button label="Search">
      </button></div>
    );
  }
}

const mapStateToProps = createStructuredSelector({});

const mapDispatchToProps = {
  requestApiCallAction: connectivity.actions.requestApiCall
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import { bindActionCreators } from 'redux';

import Icon from '../Icons/Icons';
import { getUser } from '../../core/user/user.actions';

function mapStateToProps({ user }) {
  return { user };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators({ getUser }, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
class Topbar extends Component {

  componentDidMount() {
    this.props.actions.getUser();
  }

  render() {
    const { user } = this.props;

    return (
      <div class="top-bar">
        <div id="brand">
          <img alt="{user.name}" src="{user.image}">
          <h3>{user.name}</h3>
          <div style="width: 36px">
          {/**/}</div></div></div>

function getClasses(visibleScore) {
    return {
        'score-view-switcher': true,
        [`-${visibleScore}`]: true
    };
}

class ScoreViewSwitcher extends Component {
    render({ visibleScore, switchScoreView }) {
        return (
            <button></button>
        );
    }
}

export default connect(null, {
    switchScoreView,
})(ScoreViewSwitcher);