Guide
Tutorials
Configure
API
Community
Guide
Tutorials
Configure
API
Community

connect

information

By default, the export package name for all APIs in this section is: @modern-js/runtime/model.

If Reduck is integrated separately from Modern.js, the export package name is: @modern-js-reduck/react.

TIP

The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see connect.

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

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

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

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

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} />;
}