useModel#

Function Signature#

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#

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#

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
}