TS Best Practices#

Reduck provides excellent support for TypeScript, and in most cases, you can get API type prompts directly without any extra work. In this section, we will provide additional information on other usage scenarios.

Defining the State Type of the Model#

Declaring type information for the State of a Model is a best practice when using Reduck in TypeScript.

interface State {
  data: string;
}

export const foo = model<State>('foo').define({
  state: {
    data: '',
  },
  computed: {
    withSuffix: state => state.data + 'suffix',
  },
  actions: {
    setData: (state, payload: string) => {
      state.data = payload;
    },
  },
});

When you declare type information for the State of a Model, the computed and actions of the Model can get the correct type information. In fact, even if we don't define State type information in the example code above, the type information of State can be automatically inferred based on the initial value information of state. However, we still recommend that you declare the type information of State when defining a Model because the type information of State inferred based on the initial value information of state may be incomplete (missing fields or field type information), and the type information of State cannot be automatically inferred based on the initial value information of state when using Function Type to define the Model.

Dependent types of Derived State#

When the derived state of a Model depends on other Models, you need to manually specify the State of the other Models.

interface State {
  data: string;
}

export const bar = model<State>('bar').define({
  state: {
    data: '',
  },
  computed: {
    // specify the type for fooState
    withFoo: [foo, (state, fooState: FooState) => state.data + fooState.data],
  },
});

Hooks for Getting Model Type Information#

Reduck provides a set of utility types for getting Model type information:

• GetModelState: Get the type information of the State (including derived state) of the Model.
• GetModelActions: Get the type information of the Actions (including Effects functions) of the Model.

export const foo = model<State2>('foo').define({
  // skip some codes
});

// get the State type of foo
let fooActions: GetModelActions<typeof foo>;
// get the Actions type of foo
let fooState: GetModelState<typeof foo>;