Tutorial 2 - Connect Cloud to React
Now that we have a source set up, we can start to wire up our React app.
Client Provider
You can use the following utility container to connect a network source, create a client, and provide the client as CloudContext:
<NetworkCloudProvider
authority="localhost:3000"
useSSL={false}
domain="todo.aven.io"
>
<App />
</NetworkCloudProvider>
Within your app, you can use the Cloud context with the following hook:
const cloud = useCloud();
// Is the same as:
const cloud = React.useContext(CloudContext);
Now, you can use the cloud client to write data:
const messageDoc = cloud.get('Message');
await messageDoc.put('Hello World');
useCloudValue hook
To read a doc, you can `useCloudValue`
function MessageView() {
const currentMessage = useCloudValue('Message');
return <Text>{currentMessage}</Text>;
}
The above is a shortcut for the following:
function MessageView() {
const cloud = useCloud();
const messageDoc = cloud.get('Message');
const currentMessage = useCloudValue(messageDoc);
return <Text>{currentMessage}</Text>;
}
Which in turn, is a shortcut for:
// useCloud grabs the provided cloud client from context.
// The provider had created the client as such:
const cloud = createCloudClient({...});
function MessageView() {
const messageDoc = cloud.get('Message');
const currentMessage = useObservable(messageDoc.observeValue);
return <Text>{currentMessage}</Text>;
}
Blocks can also be accessed with `getCloudValue`. This is a chunk of data associated with the "message" doc. ("messageBlockId" is actually a checksum)
function MyMessage() {
const currentMessage = useCloudValue('Message#messageBlockId');
return <Text>{currentMessage}</Text>;
}
// The above is a shortcut for the following:
function MyMessage() {
const cloud = useCloud();
const messageDoc = cloud.get('message');
const messageBlock = messageDoc.getBlock('messageBlockId')
const currentMessage = useCloudValue(messageBlock);
return <Text>{currentMessage}</Text>;
}
useCloudState hook
Much like React's `useState` hook, you can `useCloudState` to saveĀ and retrieve state from the client.
function MyMessage() {
const [message, setMessage] = useCloudState('Message');
return <Text>{currentMessage}</Text>;
}
// The above is a shortcut for the following:
function MyMessage() {
const cloud = useCloud();
const messageDoc = cloud.get('message');
const messageBlock = messageDoc.getBlock('messageBlockId')
const currentMessage = useCloudValue(messageBlock);
return <Text>{currentMessage}</Text>;
}
useCloudReducer hook
Inspired by the API of React's `useReducer` hook, `useCloudReducer` allows you to run a local reducer and also defer the reducing to the server for the initial load.
useCloudReducer(
'TaskActions', // name of the state doc, which refers to the block chain of actions
'TaskReducer', // name of the reducer, for delegation to the server
(state, action) => { return newState }, // reducer function
[] // initial state
);
Note! This API may change, because it currently is somewhat clumsy. There is also a mechanism to upload a lambda function (such as a reducer) as a doc, such that the server can handle this functionality without static configuration.