$ npm i enter-grand-react -g $ cd my-app/ $ enter-grand-react . “Mr Mosher?”“Yes, Monsieur Gustave?”“Am I to understand you’ve surreptitiously allowed this young man in our hotel?”“No sir, he used enter-grand-react to get here.”“Uh, another one… Thank you, Mr Mosher.”“You’re most welcome, Monsieur Gustave.” Apart from the absurdity of representing as a hotel, the strangest thing about this building was its windows. React application “Mum! Did you see that? The window changed!” said the boy after hitting an button.“Yes, Tommy, they tend to do that.” absently replied his mother while trying to read the latest news displayed on a window on the first floor.“But, I pressed a button on this window.” the boy insisted, “How could someone on the fifth floor know about that?”“I don’t know, Tommy. They just do.” onKeyPress But, of course, it was never that easy. Like most visitors, Tommy’s mother was so obsessed with the hotel windows, that she never bothered to go inside. What she took for granted, was a complex and well-organized system.And it all starts with — Monsieur Gustave. Monsieur Gustave, the Concierge Monsieur Gustave The identity of the owner of the hotel was unknown.Each month, his emissary, known as , arrived to review the books and convey messages on behalf of the mysterious proprietor. Codecs Editor On these occasions, Monsieur Gustave met him in private consultation above reception. After the meeting, he walked out with a bunch of papers called property documents, or simply — **props.**He walked over to the room , took a single document and slid it under the door.He would do that for all rooms on the first floor, before returning to his office. 100 was the first one to receive props from Monsieur Gustave. As always, she picked up the document and started working on her window. Page Wrapper When finished, she left the room, still examining her props. “The second floor.” she said to the elevator operator.As she was walking over to the room , she altered the props and slid the document under the door of 212 Section Main. (212) then forwarded it to (302). (302) sent it to (407), and while it got to (565), the document was worn out. Section Main Profile Photos Profile Photos Display Albums Gallery Slides Outside room, two visitors were arguing over its window display. Gallery Slides “No, Clarissa, I look stoned in this picture!” a girl shouted.“Go forward!” she demanded. Inside the room, an button labelled as “next” started blinking. onClick “Oh, no!” Gallery shouted although aware no one could hear him.“Ok, don’t panic! Don’t panic!” He tried to reassure himself while quickly scanning the room manual. “ ” he said enthusiastically, “This is it!” button.next — onClick! In the case of a click event on a button labelled “next”, first determine the picture number that a visitor is trying to open and then update the room state . “Ok, based on the current room state, displayed picture is sixth in a row…” figured Gallery. “She wants the seventh one!” He concluded and updated the state by writing it down using a special . setState pencil As soon as he did that, he also updated his window changing the current picture with the one he just wrote down. “This is even worse, Clarissa! I look fat!” said the girl by the window.“Go forward!” she demanded. Redux, the Lobby Boy The Lobby Boy As the number of guests kept increasing, the hotel messaging system started to feel sluggish. If for example, Monsieur Gustave had to change something on a window on the twentieth floor, at least nineteen guests had to act as his postman. He needed a better system. “Who are you?” Gustave asked while delivering props to his guests.“I’m , sir. The new Lobby Boy.” a young boy replied.“Redux, you say?”“Yes, sir.”“I’ve never heard of you, never laid eyes on you. Who hired you?”“Mr Mosher, sir.” the boy answered. Redux “Mr Mosher?” shouted Gustave.“Yes, Monsieur Gustave?”“Am I to understand you’ve surreptitiously hired this young man in the position of a Lobby Boy?”“He’s been engaged for a trial period, pending your approval, of course.”“Uh… Perhaps, yes. Thank you, Mr Mosher.”“You’re most welcome, Monsieur Gustave.” “Ok, Redux, follow me!” said Gustave and continued delivering props to his guests. “What is a Lobby Boy?” he asked.“A Lobby Boy’s completely invisible, yet always in sight.” Gustave began answering his own question.“A Lobby Boy anticipates the client’s needs before the needs are needed.”“A Lobby Boy assists the hotel most valued and distinguishedguests!” he stopped and looked at Redux.“Do you understand?” “Yes, sir. But… How will I know which guests are those?” asked Redux.“With the help of this.” said Gustave and took a golden doorknob hanger.“Each guest who is in possession of the hanger like this, is entitled to use a Lobby Boy.”“These guests are called — , and your job is to provide them with the hotel .” containers state “The hotel state, sir?” asked Redux, confused.“Yes,” said Gustave, “every window is representing some state.”“This could be a or a ” room state hotel state. “I’m sorry sir, I don’t understand.” said Redux. “Patience.” said Gustave and stopped at the elevator.“Fifth floor, please.” Monsieur Gustave walked over to the room and knocked on the door. 565 He smiled as came out. “Good day to you, Mr Slides.”“Oh… Hello, Monsieur Gustave.” Gallery answered.“Mr Slides, if you don’t mind me asking, can you tell us which picture is currently displayed on your window?” Gustave asked.“Oh… Sure… Currently displayed picture is… Fourth in a row.” said Gallery.“Yes, but what is the picture title?”“Well… I’m sorry sir, but I don’t store this information in my .” Gallery Slides room state “Just as I thought…” said Gustave and reached for his pocket.“Mr Slides, I would like you to have this golden doorknob hanger, so that our Lobby Boy here, can easily locate your room.” said Gustave and pointed out to Redux. “The Lobby Boy manages the ” said Gustave “and in the hotel state, among other things, you will find the title of the currently displayed picture.”“Oh… I see”, said Gallery.“But, only Redux is allowed to change the state. So, if you wish to propose the change, please let him know.” said Gustave.“Yes. Very well, sir. I will.” said Gallery. hotel state, “And Redux,” Monsieur Gustave looked at the Lobby Boy “you must inform Mr Slides every time you change the state.” “Is everything clear?” asked Monsieur Gustave.“Yes, sir!” Gallery and Redux responded at the same time. Code Examples Examples explained using the same characters featured in this blog post: Picture gallery Picture gallery with Redux Cast Monsieur Gustave …..… Hotel guests……………. Room windows………… Hotel visitors …………..Website visitors (users)Codecs Editor…………..Code editorMysterious proprietor….ProgrammerProps……………………. The room manual………Component logicThe room state……..….. The Lobby Boy…………. Doorknob hanger……… React application React components Component render method Component props Component local state Redux.js React/Redux Connect To be continued… Mr. Ivan, the owner of Excelsior Palace entered the hotel.“I don’t know, Gustave...”, he sadly stated.“This Lobby Boy you have suggested… He’s been great, but… I think we have a problem.” What exactly does he mean by that and could this new age of sending signals over network change something? RxJS Second part of the Grand React is coming soon…
