DEV Community: Sianwa Atemi

Day 21 - 30

Sianwa Atemi — Mon, 20 Jun 2022 18:26:45 +0000

Day 11: React Router

Today I read the react router docs. I learnt that it's a library for server-side routing. I did the Quick Start tutorial and understood some concepts. I will be doing some projects with react router in the coming week and explain more of what I have learnt.

Day 11 - 20

Sianwa Atemi — Wed, 23 Feb 2022 18:01:10 +0000

Day 11: Redux

Today I read about redux, some core concepts and when it is necessary to use. I shall create a small project for day 12 and 13 to explain the concepts that I have learnt.

Day 12: Redux (Basics)

Today I read the redux documentation and followed along with the tutorial provided. I will try to summarize all I learnt in two parts as it took two days to read through the documentation. I will then attempt to create a small project to practice what I learnt.

So what is redux? It is basically a library for managing application state. It serves as a centralized store for state that needs to be used by the entire application with certain rules that govern how state should be updated.

What makes redux different from Context api (another React state management feature covered in day 1 to 10) is that it has tooling that makes it easier when you have many state types in large applications, it makes it easier when working in teams because of its clear rules and has state slices to prevent a bloated store file, state slices help manage applications with multiple states.

Note: Using redux means writing more code and having to learn more, hence it does not need to be used for all applications. One should take the time to think about their application and the best tools to use.

Redux Terminology

Actions

This is a JavaScript object that defines something that happens in the application. It looks similar to the actions dispatched in context api

   // action
   const addUserAction = {
     type: "users/userAdded",
     payload: { username: "John", email: "john@example.com" },
   };

   // action creator
   const addUser = (data) => {
     return {
       type: "users/userAdded",
       payload: data,
     };
   };

Redux has action creators that creates and returns an action object, this prevents us from writing action objects by hand every time.

Reducers

A reducer is a function that receives the current state of the application and an action object, decides whether to update the state and returns the new state.

Reducers have rules that must be followed, some include not including operations that cause side effects like asynchronous logic, state must remain immutable and should only calculate the new state based on state and action arguments. These rules will be seen in action in future examples.

   const counterReducer = (state = { value: 0 }, action) => {
     switch (action.type) {
       case "counter/increment":
         return {
           // state should be immutable
           ...state,
           value: state.value + 1,
         };

       default:
         break;
     }
   };

Store

The entire applications state lives in an object called the store. Redux store accepts a reducer function as its arguments

   import { configureStore } from "@reduxjs/toolkit";

   const store = configureStore({ reducer: counterReducer });

Dispatch

Dispatch is a function in redux that is used to update the state, it receives an action object as its arguments or action creators to trigger a specific state update.

   // dispatch an action
   store.dispatch({
     type: "users/userAdded",
     payload: { username: "John", email: "john@example.com" },
   });

   // dispatch an action creator
   store.dispatch(addUser());

Selector

These are functions that extract specific pieces of information from a store. They are mostly used in the view part of the application. Multiple selectors can be used if you have many state slices.

   const selectCounterValue = (state) => state.value;

   const currentValue = selectCounterValue(store.getState());

Day 13 & 14: Redux Basics (Practice project)

To practice the concepts learnt in day 12, I will be refactoring the to-do list application made in day 1 that used the context api to use redux and redux tool kit.

The main action types in the to-do list will be adding a task, deleting a task, editing a task and toggling the state of a task as complete and incomplete. The original source code (using context api) is linked in day 1 of this challenge with the live demo.

To add Redux to the to-do list, I first created a store with Redux's configureStore function that takes in reducer functions as its parameter and nested the entire App component with Provider from react-redux, with the store as a prop.

import { configureStore } from "@reduxjs/toolkit";
import tasksReducer from "../tasks/tasksSlice";

export default configureStore({
  reducer: {
    tasks: tasksReducer,
  },
});

import store from "../src/app/store";
import { Provider } from "react-redux";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Next I created a tasksSlice file with the createSlice function, this allows you to create a state slice making large state more managable. createSlice accepts an initial state, an object full of reducer functions and a slice name. It creates action creators and action types that correspond to the reducers state.

import { createSlice } from "@reduxjs/toolkit";

const initialState = [];

export const taskSlice = createSlice({
  name: "tasks",
  initialState,
  reducers: {
    addTask(state, action) {
      state.push(action.payload);
    },
    deleteTask(state, action) {
      const { id } = action.payload;
      console.log(id);
      return state.filter((task) => task.id !== id);
    },
   // ... more actions available in source code provided
  }
});

export const { addTask, deleteTask, editTask, toggleComplete } =
  taskSlice.actions;

export default taskSlice.reducer;

Finally, to access the actions in the views, we use useDispatch to call the action creators and pass in payloads. useSelector is also used to read current state.

import { useSelector } from "react-redux";

// Get all tasks
const tasks = useSelector((state) => state.tasks);

import { useDispatch } from "react-redux";

 const dispatch = useDispatch();

// add task on form submit by calling add task with a payload of id, name and completed
   dispatch(
      addTask({
        id: nanoid(),
        name: newTask,
        completed: false,
      })
    );

This is a summary of what I did, the source code can be found here

Day 15: Asynchronous code in Redux

To demonstrate how to handle async code in redux, I will use the starwars api to fetch a list of films. Below is my redux store with an initial state holding an empty array of films and a loading state to show the state of requests.

import { createSlice } from "@reduxjs/toolkit";

export const LOADING_STATE = {
  WAITING: "waiting",
  REQUESTED: "requested",
  ERROR: "error",
  DONE: "done",
};

const initialState = { film: [], status: LOADING_STATE.WAITING };

export const movieSlice = createSlice({
  initialState,
  name: "movies",
  reducers: {
    uploadMovies(state, action) {
      state.film.push(action.payload);
    },
    loadingState(state, action) {
      state.status = action.payload;
    },
  },
});

export const { uploadMovies, loadingState} = movieSlice.actions;

export default movieSlice.reducer;

NOTE: One of the rules of reducers states that they must not do any asynchronous logic or other "side effects".

In the component, a useEffect hook can be used to dispatch the actions and fetch data from the api.

  useEffect(() => {
    dispatch(loadingState(LOADING_STATE.REQUESTED));
    fetch("https://swapi.dev/api/films")
      .then((res) => res.json())
      .then((data) => {
        data.results.forEach((el) => {
          dispatch(uploadMovies(el));
        });
        dispatch(loadingState(LOADING_STATE.DONE));
      })
      .catch((err) => dispatch(LOADING_STATE.ERROR));
  }, [dispatch]);

This method works alright but has some drawbacks, it puts too much logic in the component, it is not reusable as this code has to be written in multiple controllers or you might have to call the component every time.

This can be solved using redux middleware.

Day 16: Redux Middleware

For simple applications, the above approach in day 15 would work but when apps get larger you may have difficulties with that approach, for example you may have to repeat certain chunks of code just to carry out the same functionality.

Redux middleware works by first handling an event, like a user click or page reload, an object or function is then dispatched, once dispatched, the value looks for a middleware to make an async call to. Finally when the async call completes, a real action object is dispatched. A better explanation can be found here, I probably butchered it 😬😂.

Anyway, thunk middlweare allows us to write functions in our reducers that get dispatch and getState as arguments

A thunk is a piece of code that does some delayed work. Link

Since I used the official redux toolkit package, I did not have to configure the store to add thunkMiddleware. In a different scenario, you have to install redux-thunk and enable it in the store as shown below.


import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/index'

const store = createStore(rootReducer, applyMiddleware(thunk))

All I did was add a thunk function in my reducer that now fetches all the movies. This is in the movie-slice.js file.

export const fetchMovies = () => {
  return (dispatch, getState) => {
    dispatch(loadingState(LOADING_STATE.REQUESTED));
    return fetch("https://swapi.dev/api/films")
      .then((res) => res.json())
      .then((data) => {
        data.results.forEach((el) => {
          dispatch(uploadMovies(el));
        });
        dispatch(loadingState(LOADING_STATE.DONE));
      })
      .catch((err) => dispatch(LOADING_STATE.ERROR));
  };
};

Now my component is much more lean as I can now dispatch the fetchMovies function in a useEffect hook.


import {fetchMovies} from "./movies/movie-slice";

  useEffect(() => {
    dispatch(fetchMovies());
  }, [dispatch]);

This approach makes fetching movies reusable and separates concerns which can be really beneficial in large projects. I probably did not explain the concept too well and went on rambling but this is how I understood it, I shall do another practice project to make the concept stick. The code can be found in this branch

Day 17 to 19: Shopping cart in react-redux

I have been quite busy with a job and commuting, but I will try to push this small project soon and continue to day 20.

UPDATE
I finally managed to finish the shopping cart, here is the link to the source code.

Day 20: What I learnt

Day 11 to 20 of this challenge were the hardest for me because I lost motivation on day 19, It took me 2 months to complete the shopping cart project. This was not because of its complexity but because of a little bit of laziness combined with the daily struggles of working a 9 to 5 and commuting.

This is what I have learnt from day 11 to 20

How to use redux 😁😀
Showing up is better than not doing anything at all.
The final product doesn't have to be perfect (This is just a coding and learning challenge)
One loses motivation but you should never give up.

Day 1 - 10

Sianwa Atemi — Sat, 12 Feb 2022 17:43:08 +0000

Day 1 and 2: Created a simple Todo list

I have a basic knowledge in React and attempted to use that to create a todo list. I learnt how to use React hooks, Portals, the context api (useContext) and other main concepts. The code can be found here Github repo. The live demo here.

Day 3: Optimization in react

React.memo
I learnt that this is a higher order component (a function that takes a component and returns a new component) that is used when your component renders the same value and you want to improve performance.

const Book = (props) => {
  // rendering using props
};

export default React.memo(Demo);

Note: If props are passed by reference this will not prevent re-renders, like if an object is passed.

useCallback()
The useCallback() hook is useful when passing callbacks to optimized components. This can be a solution to the problem above. According to the documentation useCallback receives a callback and dependencies that when changed return a memoized version of the callback

Lets say the props in the Book component above receive an object that sometimes changes, like an array of written reviews. The Book's parent component can pass the changing object in a useCallback hook that will result in the Book only getting rendered when the array changes.

const Parent = () => {
  // state that detects a change in the review
  const [reviewState, setReview] = useState();

  // Lets assume this function handles the change of review somewhere
  const handlChange = useCallback(() => {
    // setReview() to change the reviewstate
  }, [reviewState]);

  // Book will rerender only when review changes
  return (
    <>
      <Book reviews={reviewState} />
    </>
  );
};

It will probably look different in the real world but this is just a brief explanation of what I learnt.

useMemo()
This is a hook that returns a memoized value. It is used to avoid rerendering expensive calculations. It accepts a callback and dependencies that when changed recompute the memoized value.

const heavyCalculation = useMemo(() => {
  someHeavyCalculation(x, y);
}, [x, y]);

Note: If no dependencies (x and y in the example above) are provided, a new value will be computed on every render.

Today I mostly read the docs and watched some videos to understand these three concepts.

Day 4: Error Boundaries

I learnt that Error boundaries are class components that catch errors in their child components and display fallback UIs. It's kind of like a try catch block but for jsx. To create an error boundary add the componentDidCatch() method in your class component.

class ErrorBoundary extends React.Component {
  constructor() {
    super();
    this.state = { hasError: false };
  }

  componentDidCatch() {
    // change error state
    return (this.state = { hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <p>Something went wrong.</p>;
    }

    return this.props.children;
  }
}

// The error can then be displayed in a regular component
<ErrorBoundary>
  <SomeComponent />
</ErrorBoundary>

Day 5 and 6: Sending HTTP requests

I learnt how to send HTTP requests in React. I built a small project with unsplash api where users can search for images and get results displayed to them. The image loading could be made a little bit faster by various optimization techniques, this is a feature I am yet to implement. Here is the live demo

Day 7: Using custom hooks

I learnt that a custom hook is a JavaScript function whose name starts with "use" and may call other hooks, this is according to the React documentation.

Why would you want to use a custom hook? Well, if you have repeated logic in your components a custom hook could come in handy. Below is a scenario where a custom hook would be of use.

Lets say you have an application that fetches a list of usernames from a database and that functionality is to be used in multiple components.

const HomePage = (props) => {
  const [users, setUsers] = useState(null);

  // Instead of writing this code in multiple components we can make it leaner by using a custom hook
  useEffect(() => {
    const data = fetchFromDB(props.id);
    setUser(data);
  }, []);
};

We can create a custom hook that does this and call it where it is needed. Note that a custom hook must start with "use"

import React, { useState } from "react";

const useFetchUsers = (userId) => {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    const data = fetchFromDB(userId);
    setUsers(data);
  }, []);

  return users;
};

export default useFetchUsers;

// import useFetchUsers

const HomePage = (props) => {
  const users = useFetchUsers(props.id);

  return (
    <div>
      {users.map((data) => {
        <Table key={data.id} name={data.name} />;
      })}
    </div>
  );
};

The useFetchNames hook can now be used in multiple components 👍🏾

Day 8: Forms in React

I took a 2 day break, however, today I did some light work and read about controlledcomponents. What I learnt is that in a controlled component, the form elements data is handled by the React component and not the DOM, the data is then stored in the components state, unlike an uncontrolled component that stores its own state internally and to get the value of an input you query the DOM using a ref to find its current value.

// Uncontrolled component values are accessed with refs
<input type="text" value="value" ref={inputRef} />

// Controlled components values are handled by the component
<input type="text" value={name} onChange={changeHandler} />

Using controlled components means writing a bit more code, especially when it comes to validation as you have to validate each and every input element but it gives you flexibility to pass values to other UI elements and reset them too. A workaround to this is to use custom hooks to handle your validations in a cleaner way or using a library like Formik which I am yet to use.

Day 9: Practice project

The goal is to create a very simple chat application utilizing most of the concepts that I have learnt in this first week.

User stories

User is prompted to enter username and room name to join a chat room.
User can see input field and send message on submit.
User can see who has joined or left the chat.

Day 10: Practice project(update)

The project is taking longer than expected 😅. I had to learn some socket-io and better ways to use it in React to manage its events. I shall update when I am done

(update)

I managed to create a Minimum Viable Product (MVP) that has the chat functionality working, it was quite challenging but I managed to do it. What made it hard was that the application was creating multiple socket events and connections but after reading this blog my work was much more easier.

Things to improve

Add Media queries to the app (It looks really bad on mobile). I shall update this.
Error handling (There is none at the moment)
Prevent duplicate usernames in chat.
Add encryption to the chat.

Here is the source code for the frontend and the backend which I heavily borrowed from this article.

Here is the MVP live demo with no error handling tentatively 😬.

100 days of React

Sianwa Atemi — Fri, 04 Feb 2022 17:22:15 +0000

Introduction

This is my attempt at doing or learning at least one thing in React a day in order to get better at the library and in turn gain satisfaction from it. 100 days of code is something I have always wanted to do. This is also my first blog 😎

Rules I have set for myself

Here are some rules I have set for myself

To learn a new concept everyday or implement at least one thing in react.
I have to post what I have learnt and give a brief explanation
I know that learning something new is hard, but I have to not give up till I have recorded the 100 days.
If I find a concept too difficult I will carry it forward to the next day and only document once I have fully understood the topic.
Lastly, I want to have fun 🥳

Closing remarks

I am looking forward to this challenge, it is my first time and I hope I can gain as much as possible from it. I am eager to expand my network too, if you think I can improve in any way or would also like to join you are welcome to do so.