---
sidebar_position: 5
title: connect
---

# connect

import ReduckTip from '@site-docs-en/components/reduck-tip';

<ReduckTip />

:::tip
The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**connect**](https://github.com/web-infra-dev/reduck/blob/main/packages/react/src/connect.ts).

:::

`Connect` is the same as `useModel` and is the corresponding HOC-style API. It is recommended to use the Hook-style `useModel` first.

## Function Signature

```ts
type SelectStateToProps = (
  ...modelStates: State[],
  ownProps?: any,
) => PlainObject;
type SelectActionsToProps = (
  ...modelActions: Actions[],
  ownProps?: any,
) => PlainObject;

function connect(models: Model, options?: ConnectOptions);
function connect(
  models: [...Model[], SelectStateToProps?, SelectActionsToProps?],
  options?: ConnectOptions,
);
```

### Input

- `models`: passed one or more Models. When `models` is an array type parameter, the last two params can be a function for filtering State (`SelectStateToProps` type) and a function for filtering Actions (`SelectActionsToProps` type).

  - `SelectStateToProps`: `modelStates` is an array of the State of the passed Model object, `ownProps` is the props received by current component. The data returned by `SelectStateToProps` is passed to the props of the component. When the `SelectStateToProps` parameter is not passed in `models`, the States of all Models are merged and passed to the props of the component.

  - `SelectActionsToProps`: `modelActions` is an array of the Action of the passed Model object, `ownProps` is the props received by current component. returned by `SelectActionsToProps` is passed to the props of the component. When the `SelectActionsToProps` parameter is not passed in `models`, the Action of all Models are merged and passed to the props of the component.

- `options`: Optional parameter for auxiliary configuration. Currently supports setting `forwardRef`, which is used to control whether to forward the `ref` of the component. The default value is `false`, which means that the `ref` is not forwarded. Set to `{ forwardRef: true }`, which means to forward `ref`.

### Return Type

Returns a HOC: receives an component, returns a component with extra State and Actions injected on `props`.

## Example

### Basic

```ts
const modelA = model('modelA').define({
  state: {
    a: 1,
  },
  actions: {
    incA(state) {
      return {
        ...state,
        a: state.a + 1,
      };
    },
  },
});

const modelB = model('modelB').define({
  state: {
    b: 10,
  },
  actions: {
    incB(state) {
      return {
        ...state,
        b: state.b + 1,
      };
    },
  },
});

function Test(props) {
  props.incA(); // call modelA's action
  props.incB(); // call modelB's action

  props.a; // get modelA's state: a
  props.b; // get modelB's state: b
}

export default connect([modelA, modelB])(Test);
```

### Select State & Actions

```ts
function Test(props) {
  props.incAll();
  props.c;
}

const stateSelector = (stateA, stateB) => ({
  ...stateA,
  ...stateB,
  c: stateA.a + stateA.b,
});
const actionsSelector = (actionsA, actionsB) => ({
  ...actionsA,
  ...actionsB,
  incAll: () => {
    actionsA.incA();
    actionsB.incB();
  },
});

export default connect([modelA, modelB, stateSelector, actionsSelector])(Test);
```

### Forwarding Ref

```ts
import { useRef, forwardRef } from 'react';

function Test(props, ref) {
  const { a, b } = props;

  return (
    <div ref={ref}>
      <span>{a}</span>
      <span>{b}</span>
    </div>
  );
}

const TestWrapper = connect([modelA, modelB], { forwardRef: true })(
  forwardRef(Test),
);

function App() {
  const testRef = useRef();

  return <TestWrapper ref={testRef} />;
}
```
