Fetching GitHub User with REST API and ReactJS

In this post, I explain how you can find any user on GitHub through GitHub API using ReactJS, Redux, Saga, Axios, and Formik.

Why do we need to use this technology stack? Here is the short description:

  • ReactJS to build user interfaces;
  • Redux to manage the state of the app;
  • Saga to handle async actions;
  • Axios to send requests and receive responses from the REST API;
  • Formik to control and validate (with Yup) DOM-forms easier.

Let’s create a new ReactJS app with create-react-app and then inside the project directory in the terminal install the following npm packages:

npm install axios formik react-redux redux redux-saga yup

And now let’s start the app implementation 🚀

User-Scenario:

As the user,
I want to search for a specific user from GitHub,
So that I can get detailed information about the user.
When I input the username into the search field,
And I press Enter or click on the "Submit" button,
Then I see the detailed user data from Github.

Step 1

In src directory create a new file called actions.js. Here we have to write actions that would be dispatched to the redux store:

Step 2

Here we want to create a saga, that will initiate an API call for user data through the entered specific username, then tell the store whether that API call was a success.

When successful, the user data will be received and dispatched ‘LOAD_USER_DATA_SUCCESS’ along with the retrieved data.

We’ll use axios to make API requests because it is more ergonomic and straightforward when working with REST APIs (comparing to, e.g., fetch).

Let’s create a new file called saga.js and put the code into it:

The function* creates a particular function called generator that remember the state of the function over time.

Any async step is represented through yield function like ‘await’ function.

Step 3

As soon as we started working with Redux and Redux-Saga we need to store the whole state tree of the app, so we declare the store variable in the root index.js file:

Step 4

We have already passed the userReducer to the store. Now it’s time to create it. The reducer will listen to actions and handle them:

Step 5

Finally, we can create class component <Dashboard /> to use <Formik /> to render the form, validate the user input, handle Formik props inside the DOM-elements and render the output from the user request by the username from GitHub:

Step 6

The last thing we have to do is to import the <Dashboard /> component to the <App /> component:

And then check whether everything works correctly by running the localhost server inside the project directory in the terminal:

npm start

After a successful compilation and requesting the user from the GitHub database, we should see the following result:

CSS-styles you can find in CSS-files of the project.


I hope, throughout this process, you have learned how to use Formik with ReactJS, connect Redux to the app, make API calls through axios and handle async actions with Redux-Saga.

Thank you for reading! 👏

I hope you enjoyed and found the post helpful and useful.
Have any questions? Reach out to me through my website or via social networks on Twitter or Instagram.

Have a great start into the week!

Cheers,
ilonacodes