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
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
The Concept Used in the App
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.
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
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:
npm start or
You should see a website launched on
Now, let’s build!
Building our Elevator
App.jsfile in the project directory, and update it with the following code.
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.
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.
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???.
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?
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
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
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
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
- The component export file, e.g
index,js. All this file does is to export my component.
- The Component itself. e.g
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
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.
The Container component is simply the elevator container, where the lift will drop people off : );
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.
Have questions? Leave comments below.