The Grand React Hotel — Beginner’s guide to React & Redux

$ 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 React application as a hotel, the strangest thing about this building was its windows.

“Mum! Did you see that? The window changed!” said the boy after hitting an onKeyPress 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.”

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 Codecs Editor, arrived to review the books and convey messages on behalf of the mysterious proprietor.

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 100, 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.

Page Wrapper was the first one to receive props from Monsieur Gustave. As always, she picked up the document and started working on her window.

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 212, she altered the props and slid the document under the door of Section Main.

Section Main (212) then forwarded it to Profile Photos (302).Profile Photos (302) sent it to Display Albums (407), and while it got to Gallery Slides (565), the document was worn out.

Outside Gallery Slides room, two visitors were arguing over its window display.

“No, Clarissa, I look stoned in this picture!” a girl shouted.“Go forward!” she demanded.

Inside the room, an onClick button labelled as “next” started blinking.

“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.

“button.next — onClick!” he said enthusiastically, “This is it!”

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 Redux, 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.

“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 — containers, and your job is to provide them with the hotel state.”

“The hotel state, sir?” asked Redux, confused.“Yes,” said Gustave, “every window is representing some state.”“This could be a room state or a 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 565 and knocked on the door.

He smiled as Gallery Slides 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 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 hotel state,” 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.

“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 galleryPicture gallery with Redux

Cast

Monsieur Gustave …..…React applicationHotel guests…………….React componentsRoom windows…………Component render methodHotel visitors …………..Website visitors (users)Codecs Editor…………..Code editorMysterious proprietor….ProgrammerProps…………………….Component propsThe room manual………Component logicThe room state……..…..Component local stateThe Lobby Boy………….Redux.jsDoorknob hanger………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 RxJS network change something?

Second part of the Grand React is coming soon…