---
sidebar_position: 2
title: useModel
---
# useModel

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 [**model**](https://github.com/web-infra-dev/reduck/blob/main/packages/store/src/model/model.ts).

:::

## Function Signature

```ts
function useModel(
  models: Models[],
  stateSelector?: StateSelector,
  actionSelector?: ActionSelector,
): [state, actions, subscribe];
function useModel(
  ...models: Models[],
  stateSelector?: (...args: State[]) => any,
  actionSelector?: (...args: Actions[]) => any,
): [state, actions, subscribe];
```

### Input

- models: Array of Model objects, which can be passed in as an array type parameter, or all Models can be passed in as parameters one by one.
- stateSelector: Optional parameters, used to filter State calculations. The first n parameters are the States corresponding to n Models, and the returned data is used as the first element of the `useModel` return value array.
- actionSelector: Optional parameters, used to filter Action calculations. The first n parameters are the States corresponding to n Models, and the returned data is used as the second element of the `useModel` return value array.

### Return Value

Returns an array with each value:

- state: return value of `stateSelector`. if there is no `stateSelector`, will combine all incoming Model States(including derived states) and return them. If there is an attribute of the same name in the State of different Models, the following State will override the previous State. when `state` changes, the component call `useModel` will re-render.
- actions: return value of `actionSelector`. if there is no `actionSelector`, will combine all incoming Model Action(including Effect) and return them. If there is an attribute of the same name in the Action of different Models, the following Action will override the previous Action.
- subscribe: A function that subscribes to State changes. This function is called when the State of any Model passed in changes.

## Example

### Basic

```tsx
import todoModel from 'models/todo';
import filterModel from 'models/filter';

function Test(props) {
  const [state, actions] = useModel([todoModel, filterModel]);
  actions.add(); // call todoModel add action
  actions.setVisibleStatus(); // call filterModel filterModel action

  state.items; // get todoModel state items
  state.visibleStatus; // get filterModel state visibleStatus
}
```

### Selector Usage

```js
function Test(props) {
  const [state, actions] = useModel(
    [todoModel, filterModel],
    (todoState, filterState) => ({
      items: todoState.items,
      visibleStatus: `${props.prefix}-${filterState.visibleStatus}`,
    }),
    (todoActions, filterActions) => ({
      ...todoActions,
      ...filterActions,
    }),
  );
  actions.add(); // call todoModel add action
  actions.setVisibleStatus(); // call filterModel filterModel action

  state.items; // get todoModel state items
  state.visibleStatus; // get filterModel state visibleStatus
}
```

:::info More
[use Model](/guides/topic-detail/model/use-model).

:::
