Can anyone explain a little bit about the code below?

Question

So I am currently reviewing React-Redux code written with JS and Flow-Type. I have little experience in Flow-Type so the code below is a little bit confusing me.

First I have some actions for redux part.

export type allActions = 
|{|
   +type: "FIRST_ACTION_TYPE",
   +formType: FormType,
   +offset: number,
   +size: number
 |}
|{|
   +type: "SECOND_ACTION_TYPE",
|};

So my first question is what does |{||}| this expression mean?

And also the second question is for the FormType part. So above the actions there is the definition of FormType. Which is shown below

type FormProps = {
   prop_1?: string,
   prop_2?: number,
   prop_3: number
};

type FormType = RecordOf<FormProps>;

Can anyone please explain what this code above is doing?

Answer 1

The allActions is a union type that use to type Redux Dispatch. This allows flow to throw an error if you dispatch an invalid action.

|{|
   +type: "FIRST_ACTION_TYPE",
   +formType: FormType,
   +offset: number,
   +size: number
 |}
|{|
   +type: "SECOND_ACTION_TYPE",
|};

The first | is a bit confusing but is just an optional character that is commonly added by lints on multiline unions. It could be removed and not cause an error.

https://flow.org/en/docs/types/unions/

{|...|} define an exact object that cannot contain any additional properties. The | between them defines the union.

https://flow.org/en/docs/types/objects/#toc-exact-object-types

The + sign before marks each property as read only.

The ? sign after each property in the form data marks each as optional.

The recordOf is generic type. I think it may be custom or perhaps an older version of flow.

https://flow.org/en/docs/types/generics/#toc-parameterized-generics