Motel is an implementation of the vacancy observer pattern, which simplifies data-fetching in unidirectional data-flow apps. It was designed with Redux in mind, but has no explicit dependencies on Redux or React.
npm install motel
1. Add vacancy listeners
// vacancies.jsconst motel = ;const vacancies = ;vacancies;moduleexports = vacancies;
2. Wire it up
// main.jsconst vacancies = ;const myReduxStore = redux;vacancies;vacancies;
3. Render your app
// user-profile.jsxif !userreturn <div data-vacancy=`users/`>Loading...</div>;elsereturn <div>username’s Profile</div>;
motel() (Factory Function)
Initialize a vacancy observer using this factory function.
const motel = ;const vacancies = ;
Motel#listen(pattern, handler) (Method)
Match specific vacancies by pattern. Conceptually similar to URL routing.
pattern- Regex or string. If string, url-pattern is used.
handler(params, send)- Callback when a vacancy matches the pattern.
paramsis whatever is produced by a match against url-pattern or regex.
sendis a function you can call multiple times to stream actions to your reducer. Can be either sync or async function.
Motel#connect(root) (Method) (DOM-Dependent)
Call once. Start observing vacancies under the given root element.
root should live at or above your app's mount node in the DOM tree, and otherwise not disappear over the life of your app.
Motel#disconnect() (Method) (DOM-Dependent)
Stop observing vacancies.
Subscribe to the output of the vacancy observer. The
subscriber argument is a function that will be called many times. Specifically, it will be called whenever a vacancy listener calls its
send() function, passing along the argument it was called with.
Manually publish a vacancy, even if you haven't called