HOW TO JAVASCRIPT REDUX SOFTWARE

How to build an elevator with ReactJS using Redux for state management

how-i-built-elevator-reactjs-encodedbicoding
Written by encodedBicoding

 

image_showing_how_I_built_an_elevator_in_reactjs

Elevator UI representation

This is going to be a long read, so brace yourself and ensure you follow along as we learn how to build an elevator with ReactJS and using Redux for state management.

NOTE: The files for this project can be found on Github: Elevator with ReactJS by Encodedbicoding.  I encourage you to clone this project.

What you will learn from this project:

    • How to use ReactJS
    • How to use Redux for state management
    • How to manage state in ReactJS

This Project was bootstrapped using create-react-app

If you intend to get the package on Github, please see the README.MD file for instructions on how to get started with the project.

What I expect from the reader

elevator_project_architecture

The architecture of the project

The Concept Used in the App

The App.js file shows us a group of buttons and a Container component which serves as the Elevator itself. When a button is clicked, an action is dispatched with a payload that contains the name of the floor, the button we clicked on. Our app states changes, and get’s updated accordingly. Each time the state changes, it prompts our lift to move. Pretty straightforward right? now let’s dive into how to build an elevator with ReactJS using Redux for state management.

Getting Started

Create a new folder, name it elevator_folder or anything you choose.

Open that folder in your text editor.

If you do not have create-react-app installed on your machine, please install it by running the following code: npm install -g create-react-app or yarn global add create-react-app

Using NPX

To use npx, simply run the following code in the terminal provided by your text editor npx create-react-app elevator

After installation completes, run the following code:

cd elevator

npm start or yarn start

 

You should see a website launched on localhost:3000

Now, let’s build!

 

Building our Elevator

Locate the App.jsfile in the project directory, and update it with the following code.

Note: index.js serves as your main entry file. It’s where your pages are rendered in. The App.js file serves as the main component in which all other component is a child to.

From the code snippet above, there are a lot of imports going on.

First, we import React from 'react', we do this so we can use JSX (an HTML-like syntax). React helps us compile this to pure Javascript.

Please, ensure you clone this project from Github so you can follow along, and test the code as you learn.

The component folder is where all the components we need to use would be housed. It is actually a good practice to place components in this folder, only components that interact with our redux store. Components that only renders a view should be placed in a presentational folder.

 

Installing Redux to manage state

Before we continue, let us set up Redux to manage the app state. If you have not used redux before, this article can help you get started

in the terminal provided by your text editor, run npm install redux react-redux redux-thunk

Note: Redux-thunk is used when you intend to make calls over the network. It’s not really needed in this project, but I used it anyway… lol.

Create a store.js file in the root of your src file, according to the project architecture. Update both your index.js and store.js file with the code below

 

Set up Reducer

What are Reducers?: In redux, you cannot mutate the state directly, it uses the same principles the normal class component state, and useState hooks use. A reducer is a function that sort of watches for an action type, then changes the store state based on the action type.

 

Our buttonReducer watches for an action that has a type of ‘ELEVATE’, this reducer also returns a payload, which is the action name, which is the name of the floor we intend to go to. The Reducer simply sees this ELEVATE type and update the floor state with the name of the floor we intend to go to. simple right???.

 

The index.js file imports the reducer we have defined. Then it uses combineReducers which is simply a function that takes in all reducers in your projects as an object, and returns a single reducer object.

This main reducer object can then be used in the store you had previously defined.

Set up Actions

Actions are functions that dispatch an object to the reducer, this object comprises of a type property and an optional payload property. These are functions that are called directly by users that interact with our codebase, say when a user clicks a button.

How does the App see the state of our Redux store?

In the index.js located at the root of our src folder, we imported the App component, and also an higher-order-component called Provider, Provider has a store property that takes in our app store instance as value. This Provider component is provided to us by react-deux package.

This setup explains the very basic principles on how to build anything with ReactJS and using Redux for state management

 

So far, we have talked about the store, the reducersand the actions. Now, let’s add some elevator data.

Adding the Elevator Data

Before I show you the code, let us think for a moment about how the data structure would be.

We have seven floors and a button to get to the ground floor.

Create a data folder inside the src folder, and add the following code

This liftData is a simple array of objects, each object returns the name of the floor we intend to go to.

Now, we have all the background code set up. Let us now manipulate the DOM, by writing code that will actually be shown on the browser. First, we need to create components.

 

Creating components in ReactJS

Looking at the UI representation of the project, on the left hand of the project we have the buttons, and on the right, we have the elevator container, and the elevator itself (Lift).

to create components, I usually create a folder for such components. In this folder would contain the following files:

    • The Component itself. e.g Button.js. Please notice the Capital letter.
    • The style for the component e.g button.css
    • The component export file, e.g index,js. All this file does is to export my component.

Button.js Component

The button would be something we can click on, clicking on a button should dispatch an action which in turn affects the state of our store, when a reducer processes the action. This means that the button somehow has to connected to the store right?

Looking at that code snippet, on line 2, we imported connectfrom react-redux

This connect is a higher-order-function, and its duty is to register the component to be able to either get data from the store or be able to access a dispatchmethod provided by the store. The dispatch method is used to dispatch actions that the reducers can deal with.

The button component simply returns an HTML button with an event listener attached to it. We imported the lift action and mapped it to the component using the connect function on line 26. By doing this, we can now access the lift action from the component’s props.

Since I am using a functional component, I destructured the components properties on line 26.

If you look at the lift action in the actions folder, you will notice it takes in a single argument, which is the event object. The event object has the name value of each button. It takes the name of the button and dispatches an ELEVATE action with the name as a payload.

Please ensure you add the CSS files from the project on Github.

Container.js Component

The Container component is simply the elevator container, where the lift will drop people off : );

Lift.js Component

This component is simply the elevator, it’s the component that carries the person to each floor.

we change the style of the person when we receive a new floor value from the state.

Simple right?

Have questions? Leave comments below.

About the author

encodedBicoding

Software Engineer || Tech Enthusiast.
Ex @andela
Github: https://github.com/encodedBicoding
Geek Name: EncodedBicoding
Real Name: Dominic Isioma Olije

Leave a Comment