Event driven helper allowing events to be dispatched in an organized way for React applications.
$ npm install octopodaOR
$ yarn add octopodaCreate a Tentacle or event stack that your Octopods can trigger on change of status. Within your pod (shown below) you can trigger status changes allowing for the event listeners to be triggered. Click "show code" below to see how this is initialized.
const fetchEvents = new Tentacle();
fetchEvents
.on(Status.PROGRESS, () => console.log('FETCH STARTED'))
.on(Status.SUCCESS, () => console.log('FETCH SUCCESSFUL'))
.on(Status.COMPLETE, (json) => console.info('FETCH COMPLETED:', json));Create a Handler to trigger the above Tentacle event stacks.
const handler = (pod: Octopod) => (url: string, cb?: (data) => void) => {
pod.status(Status.PROGRESS);
fetch(url)
.then(res => {
if (!res.ok)
return pod.status(Status.ERROR, res);
return res.json();
})
.then(json => {
pod.status(Status.SUCCESS);
pod.status(Status.COMPLETE, json);
cb(json);
});
};Create an Octopoda instance passing in any Tentacle instances (multiple supported) and a Handler function that will be used for dispatching.
const fetcher = new Octopod(fetchEvents, handler);Finally, export out your Octopoda store exposing your provider and your useOcto hook.
const { Provider, useOcto } = initOcto({
tentacles: {
fetchEvents
},
octopods: {
fetcher
}
});
export {
Provider,
useOcto,
};import initOcto, { Tentacle, Octopod, Status } from '../';
const fetchEvents = new Tentacle('fetch');
fetchEvents
.on(Status.PROGRESS, () => console.log('FETCH STARTED'))
.on(Status.SUCCESS, () => console.log('FETCH SUCCESSFUL'))
.on(Status.COMPLETE, (json) => console.info('FETCH COMPLETED:', json));
const handler = pod => (url: string, cb?: (data) => void) => {
pod.status(Status.PROGRESS);
fetch(url)
.then(res => {
if (!res.ok)
return pod.status(Status.ERROR, res);
return res.json();
})
.then(json => {
pod.status(Status.SUCCESS);
pod.status(Status.COMPLETE, json);
cb(json);
});
};
const fetcher = new Octopod('fetcher', fetchEvents, handler);
const { Provider, useOcto } = initOcto({
tentacles: {
fetchEvents
},
octopods: {
fetcher
}
});
export {
Provider,
useOcto
};Create a Hook to use the Octopod you created in your initialization. Simply call "useOcto" and then pass in the name of the pod that you have defined. Finally in a useEffect or some sort of event dispatch the action/handler.
const octo = useOcto('fetcher');
const fetchUser = () => {
octo.dispatch(https://randomuser.me/api/, (data) => {
dispatch({ ...store, data })
});
};