独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Do you need a Switcher for your React project?

A needed workflow to efficiently execute your React projects.

I have constantly been in situations where I would like to render a certain component or some specific data only when a certain condition is met or switch views on a page without routing the user to a different page. Additionally, many are times when I’d prefer to have a different view of each state of the program. For example, having a view while a component is fetching data from the server and having a view if it fails to retrieve the data. This ability to show whichever view I want based on certain conditions means that I can significantly control the user’s experience. A good example would be how online stores show you a button to purchase what’s on your cart, a view with a loader or spinner on purchase, and a success page if your payment goes through. How would you achieve this?

Based on the above, you probably have an idea of what to do or know exactly what to do because of your coding experience(Yes, you React buff). I’m also guessing that you may have already concluded that a simple ternary operator would achieve this effect and assuming you know your way around React you probably have a better solution to this problem. Regardless of your coding experience with React, I would like to share my workflow in such situations. Your feedback on this is invaluable to me :).

This article will best serve React developers or those learning the framework. A basic understanding of Redux, Javascript and JSX is also recommended.

I will be using the following dependencies to make it easier to demo ;

Here is a link to the code :

After cloning the repository, run the following commands in your terminal.

First things first, all the code in this article will revolve around this simple component. The Switcher expects a value prop that will determine what is rendered.

I recommend that you have this component in its own folder and have an index.js file to export it.

I will take you through three basic situations where I have used the Switcher. First, initialize a blank react app and install the dependencies I have mentioned above. Once you are set up, create a page where you will demo. Yes, every view in this article will be rendered on a single page but the Switcher will help in showing only what’s relevant.

Say you have content in your database and have designed a table view to display it. Furthermore, you’ve also designed a different view that would show the same data but has a different interface for your users. I have designed simple cards in a grid-like interface that simply uses flex to align the cards.

We will add buttons that on click will switch between the views but first make sure that your main page imports these two views and the Switcher.

Structure your component as you deem fit and add the Switcher component where the main content would have gone.

This is the code to my example. I have used styled-components hence the custom JSX tags.

The above snippet is basically composed of a header section, a button section and the main body section with the Switcher. The props on the buttons are for styling and the on-click function changes the current state of which view should be displayed.

The Switcher currently has three props. The value, table and grid. I mentioned earlier that all you need is a value prop on your Switcher and this determines the rules of what will be displayed by the rest of the props.

Currently, the view is set to view which is a string saved in state. This string matches one of the remaining props. All that’s remaining is pointing the table or grid props in the Switcher to the relevant component. Easy, right! Click on the buttons to change state and in turn change views.

Let’s up the ante. I would like that when a user clicks on the write icon ✍, they have a form pop up that enables them to edit the record. The form will have a ‘save’ button that will update the record on the database. The button should show a spinner once they click ‘save’ and on success, it should show ‘Success’ and on failure, it should show a red error button.

I will show you snippets of what I mean and only focus on the Switcher code. Clone my repository if you need to clarify any questions you may have on this aspect.

Create an update record function in your actions.js file and have the modal access it. The actions file will dispatch accordingly based on the server response. In your reducer, have an update record process object that has a status of IDLE. This status will be changed as you send a request to the server and after you receive a response. Like so;

The purpose of this ‘status’ key-value pair is to provide a value to the Switcher. The SUCCESS, ERROR, PROCESSING and IDLE values will mean that we have the ability to add different views for each of these values.

Please ensure that your redux is well set up for updating and deleting a record.

Let’s now have the Switcher component read this status value and render different button views.

This code will go where the Save button is placed in your code. I mentioned earlier that I am using react-hook-form for form submission. The submit button will therefore call a function that calls the function we defined in the actions file.

The result will have the interface looking like this once the user clicks save.

Below are the success and error views.

I have also set up a Switcher for rendering Placeholder components while the page fetches the records. It’s not as cool as the Netflix or YouTube placeholders but it’s enough for my demo.

I hope I haven’t lost you so far as the next part is important.

Currently, I have a function in my modal container that resets the process after SUCCESS or ERROR and closes the modal on SUCCESS. If you haven’t done this then you may have noticed a bug. The ‘record details’ will update but every other record will have the Save button set to Success. This will of course disappear when you reload the page. The reset function solves the problem but not entirely. Here is the code that’s resetting the process

I say this because once you set up the delete icon to delete the record on click then you’ll see what I mean. Each of the delete icons on the page will show the views you’ve set all at once. This is of course not what we want.

This problem helped me discover the last example.

Considering that the delete button is shared, we need a way of telling the Switcher to only show the loading and success views on the clicked record and not on all the delete buttons on the page.

Here are some images to better define what I mean. One will show the problem and the other will show how I would like it to be.

How would you achieve the second one? Easy. Add a unique key-value pair to the delete record process object. I used id and set it to null. This id will be updated to the id of the clicked record in your delete function in redux.

This is what I mean,

Now that the process also has access to the record id, it’s as simple as having the switcher only show the processing, success and error statuses to the record that has an id that matches the delete record process; record id.

The false prop will cover the IDLE status and as long as the record is not being deleted it will have that view. But once the user clicks on delete then the PROCESSING, SUCCESS or ERROR views will come in place.

Add a button that will enable the user to add a record. Use the Switcher component on the button that will save the record. The record should appear on the page after save without reloading the page.

With the help of a single component that is defined once in your entire project, you can create a better user experience. The props supplied to this component are not static and you can have as many views as possible.

So, do you need this component in your React project?

Add a comment

What is your view?

Send

Related posts:

Bitcoin is precious because it is rare

The supply of bitcoin is limited and inflation is virtually zero. The bitcoin system is designed to mimic the supply of gold, with a ceiling of 21 million; It can effectively prevent central Banks…

Seven Super Stress Solutions

Stress was a condition my “President of his own Company” brother had. His blood pressure was high, there were ulcers in his gut, and he couldn’t sleep without pills. But me? I was not the type of…