Deepstream-React Connect
Usage
Connect
;;;; Component { return <div>thispropstext</div>; } const client = ; const user_id = "user-A";const device_id = "device-A"; const parameters = user_id device_id ; const ConnectedExampleComponent = ; const element = <ConnectedExampleComponent text="Default Text" ":device_id/text" ":user_id/text" />; ReactDOM;// Renders <div>Default Text</div> clientrecord;// Renders <div>User Text</div> clientrecord;// Renders <div>Device Text</div>
Marshaler
;;; Component { return <div ...thisprops />; } const marshaler = ExampleComponent; const element = <ExampleComponent key="exampleKey"><span>Example Text</span></ExampleComponent>; const instance = marshaler; //{// "type": "ExampleComponent",// "props": {},// "children": [// {// "type": "span",// "props": {},// "children": [// {// "type": "Text",// "props": {// "value": "Example Text"// },// "children": [],// "key": "230d9fec7d745d58a0de0558b5d5b6ac"// }// ],// "key": "4045ccd70148bf5a19f5f715c62c6944"// }// ],// "key": "exampleKey"//} const element = marshaler; ReactDOM;// Renders <div><span>Example Text</span></div>
Hydrator
;;;; Component { return <div ...thisprops />; } const client = ; const hydrator = client ExampleComponent; const element = <ExampleComponent key="exampleKey"><span>Example Text</span></ExampleComponent>; const dehydrateThenRehydrate = async { const key = await hydrator; // key === "exampleKey" const unsubscribeHydrator = hydrator;} ;
Hydrator + Marshaler
;;;; Component { return <div ...thisprops />; } const client = ; const marshaler = ExampleComponent; const element = <ExampleComponent key="exampleKey"><span>Example Text</span></ExampleComponent>; const instance = marshaler; // Array containing ExampleComponent // is not required if marshaling is done earlier.const hydrator = client; hydrator;