DEV Community: Dewald Els

JavaScript: Async/Await Wrapper

Dewald Els — Sat, 26 Jun 2021 19:29:49 +0000

Reusable function to run any Promise that returns an array of data and error.

Using Async/Await is great, but when working with multiple Promises it often clutters your code with multiple try/catch statements. I wrote this wrapper to easy encapsulate the try/catch and return an array with the data in the 1st index and the error in the second index.

Source code

GitHub Respository

Wrapper function

export const asyncWrapper = async (asyncFunction, params = null) => {
    try {
        const data = await asyncFunction(params)
        return [data, null]
    }
    catch (error) {
        return [ null, error ]
    }
}

Implementation

// Use them all together! <3 
const handleFetchAllClick = async () => {
    // No gross try/catch everywhere
    const [users, usersError] = await asyncWrapper(fetchUsersRequest)
    const [todos, todosError] = await asyncWrapper(fetchTodosRequest)
    const [user, userError] = await asyncWrapper(fetchUserByIdRequest, 1)
    const [newUser, newUserError] = await asyncWrapper(createUsersRequest, mockUser)
}

🤓 Thanks for reading 🙏

Angular Developer discovers Redux-Toolkit

Dewald Els — Sun, 23 May 2021 15:07:06 +0000

As an Angular developer, one of my biggest challenges was shifting my thought process from mutable-, to immutable state.

In an Angular service, you can simply assign a new value to a property, and like magic - the change detection would kick in and update any component using the property.

Switching over to React, suddenly immutable state is the way to go! Then, suddenly Redux - actions, reducers, middleware, dispatchers, and the list goes on.

🚪 Enter - Redux Toolkit

The first time I saw Redux toolkit, the very first thing that hit me, in Reducers:

...
reducers: {
    increment: state => {
        state.value += 1;
    }
}
...

🤯 What is this madness?!

Assignment operator in a Reducer? For a brief moment I thought I somehow ended up in the Vuex documentation, this is how you update state in mutations. But No, it was Redux Toolkit.

I followed the Redux Toolkit Quick Start tutorial and started creating some enhancers for middleware. It was fantastic! Suddenly I had a reason to enjoy using React and Redux.

🤔 What is Redux Toolkit?

Take this excerpt from the official documentation:

The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"

"I have to add a lot of packages to get Redux to do anything useful"

"Redux requires too much boilerplate code"

Once I read that introduction, I felt like they wrote this intro directly aimed at me 😂.

📝 Sidenote

Personally, I feel being a front-end developer can be a very fatiguing career. As soon as you're comfortable learning one tech stack/library/framework, the blog posts start popping up:
Have you tried "The Best Framework Ever, you should!" or "You don't know Server Side Rendering is better than what you're currently doing and you suck for not knowing it!". Okay, so maybe a little exaggerated.

The point was, that it's great to see the team coming up with a "standard" way of doing things.

Oh, and Why can we use the assignment operator?

Well, it turns out that Redux Toolkit, by default, includes a library called immer.

To quote the official documents again:

Redux Toolkit allows us to write "mutating" logic in reducers. It doesn't actually mutate the state because it uses the Immer library, which detects changes to a "draft state" and produces a brand new immutable state based off those changes.

A shout out to the dev(s) of Immer! I think it's a fantastic library.

🏁 Conclusion

So there you have it! I think I might actually enjoy writing React code after learning some more of the fundamentals of Redux Toolkit. This is a great start for sure!

Have you ever tried Redux Toolkit? Perhaps you've gone down a similar path?

🤓 Thanks for reading 🙏

Edit: Typos

React: ContextAPI as a State solution? [ UPDATED ]

Dewald Els — Fri, 21 May 2021 11:02:09 +0000

Updated from Previous Article

Article No Longer Available

⛔️ Problems with Previous Approach

Although the approach taken in the previous article seemed to work fine, the most severe problem was that any component that used the AppContext would re-render. Even if it was using an unrelated state object from the Context. Therefore, I set out to fix this.

✅ Solution

I've updated to solution to use multiple contexts, one for each part of the state. I then created a AppContext which brought together all the Contexts and wrapped that around my my application.

🧑‍💻 The code

You can get a copy of the code on Github, I've created a new branch which you can find here:

Github - Separated State

Creating separate Contexts

The first order of business is to create a new Context for each part of my state.

You will see in each of the code snippets that there are two main parts.

The Provider Component: The Context Provider is used as a Higher Order Component and provides the state value and setter as an Object to the value. This allows the developer to desctructure only the state or setter in a Component.
Custom Hook: to access the Context's state The custom hook allows easy access to the state and avoids the import of both useContext and MoviesContext in any component that wishes to use the movies state.

The Movies Context

import {createContext, useContext, useState} from "react";

const MoviesContext = createContext([]);

export const useMovies = () => {
    return useContext(MoviesContext);
}

export const MoviesProvider = ({children}) => {
    const [movies, setMovies] = useState([]);
    return (
        <MoviesContext.Provider value={{movies, setMovies}}>
            {children}
        </MoviesContext.Provider>
    )
}

context/MoviesContext.js

The Profile Context

import {createContext, useContext, useState} from "react";

const ProfileContext = createContext(null);

export const useProfile = () => {
    return useContext(ProfileContext);
}

export const ProfileProvider = ({children}) => {
    const [profile, setProfile] = useState(null);
    return (
        <ProfileContext.Provider value={{profile, setProfile}}>
            {children}
        </ProfileContext.Provider>
    )
}

context/ProfileContext.js

The UiLoading Context

import {createContext, useContext, useState} from "react";

const UiLoadingContext = createContext(false);

export const useUiLoading = () => {
    return useContext(UiLoadingContext);
}

export const UiLoadingProvider = ({children}) => {
    const [uiLoading, setUiLoading] = useState(false);
    return (
        <UiLoadingContext.Provider value={{uiLoading, setUiLoading}}>
            {children}
        </UiLoadingContext.Provider>
    )
}

context/UiLoadingContext.js

The new AppContext

Given that I now have three separate contexts, rather than bloating the index.js file with multiple providers, I decided to create a AppContext component to group all the Providers together.

As far as I can tell, the order here does not make a difference. Feel free to correct this in the comments, and I will update the article.

import {ProfileProvider} from "./ProfileContext";
import {MoviesProvider} from "./MoviesContext";
import {UiLoadingProvider} from "./UiLoadingContext";

export const AppProvider = ({children}) => {
    return (
        <ProfileProvider>
            <MoviesProvider>
                <UiLoadingProvider>
                    {children}
                </UiLoadingProvider>
            </MoviesProvider>
        </ProfileProvider>
    )
}

context/AppContext.js

Using the Context's State

Thanks to the custom hook in each context, it is terrifically easy to gain access to both the state value and/or setter.

If you would want to update the profile, and ONLY have access to the setter, you can write the following code:

const Login = () => {
    console.log('Login.render()')
    const {setProfile} = useProfile();

    const onLoginClick = () => {
        setProfile({username: 'birdperson'});
    }
... // Login.js

The big "Win" here, is that ONLY components using the profile context will now re-render. This is a stark contrast to the previous article's approach where all components using the AppContext would re-render, even if it wasn't accessing the profile state.

If you need to access both the state and the setter, you can use the custom hook again like this:

...
const {movies, setMovies} = useMovies();

And again, only components using the MoviesContext would re-render when the setMovies setter is invoked, leaving other components untouched.

Conclusion

Using Context is a great way to share state in small applications, but comes with some "Gotchas" if you're not 100% clear on how the ContextAPI works. This is been a great learning experience and thanks again for the messages pointing out the improvements to be made.

🤓 Thanks for reading 🙏

Heroku: Easily Deploy your Vue applications

Dewald Els — Thu, 20 May 2021 16:04:23 +0000

📝 Preparation

For all the steps below, it is required that you have installed the HerokuCLI on your computer. It also assumes you have Node.js and npm already installed.

Install Heroku CLI on macOS

If you are running Homebrew on your Mac, you can simply run the following command:

brew tap heroku/brew && brew install heroku

If you are not using Homebrew, I would recommend installing it.

Homebrew install: Installing Homebrew

🚫 If you prefer not to use Homebrew, please consult the official documentation for other options. (Link provided below)

Install Heroku CLI on Windows

Heroku provides an installer for Windows 64 and 32 bit. You can find it from the official documentation link below.

Install Heroku CLI on Linux

Heroku recommends using the official snap to install the CLI:

sudo snap install --classic heroku

If you want to read more about the installation and other options, feel free to take a look at the official documentation.

Official Guide for installing Heroku

Verify installation

You may verify that the CLI was successfully installed by running the version command:

heroku --version

If you can see a version printed out in the terminal, you have successfully installed the Heroku CLI.

1. Deploy Vue to Heroku

Vue is incredibly simple to deploy to Heroku. We can deploy an app in 3 easy steps!

Step 1

Create a new file and call it static.json in the root of your Vue.js project.

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

static.json

Step 2

Add the static.json to the git repository. Also ensure that all your other files have also been added.

git add .
git commit -m "Create static.json for Heroku deployment"

👏 Even if you don't have your app on a remote repository, the Vue app is initialised with an empty local repository.

Step 3

The last step is to create a new Heroku app and push to the heroku repository.

⚠️ Remember to run each line individually, don't copy-paste all the lines at one time into the terminal.

👩‍💻 Login and Create app

First login, and create your application. You can replace your-app-name-here with anything that is unique on the herokuapp.com domain.

heroku login
heroku create your-app-name-here

⚠️ Remember replace you-app-name-here with a unique name for your heroku app. It will deploy to your-app-name.herokuapps.com

🧱 Add Heroku Buildpacks

Next add the required Heroku buildpacks to your newly created application.

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

🏁 Deploy app

Lastly, you can push to the Heroku repository's master branch to deploy your code into the new Heroku app.

git push heroku master

You should see your Vue app being pushed to the Heroku repository and built on the Heroku servers. Once this is done, it will print out a success message with the URL to where the app has been deployed.

You can easily open the app running:

heroku open

⚠️ Vue Router "Gotcha"

Be careful when deploying apps that do not use a proper server. You might run into 404 problems when using the history mode. This is the case if you do not have the ability to configure your server to route traffic via the index file.

For more information about VueRouter's history mode, please consult the official documentation: VueRouter Deployment Documentation

Drop some comments if something wasn't clear enough, or if you experience any problems. You can check the official Vue documentation for more Deployment options:

Vue.js Deployment Documentation

🤓 Thanks for reading! 🙏

React: ContextAPI as a State solution?

Dewald Els — Tue, 18 May 2021 14:22:38 +0000

👨‍💻 Github Repository

If you just want to take a peek at the code, here is a repository I used for the article.

Github repository

📝 Premise of this article

The following content is purely experimental and by no means implies that it is "best-practice" or "this is how it should be done". I'm trying to become more familiar with React and these experiments help me see my own failings and misunderstandings of the framework.

💬 Feedback

I love receiving feedback from this awesome community and learn so much from the advice or resources given.

Context API

The React ContextAPI was introduced, to my understanding, NOT to replace state management, but rather, easily share props down the component tree. This made the ContextAPI a great way to avoid the "prop-drilling" problem. If you'd like to know more about that, I can highly recommend the blog post on prop drilling by Kent C. Dodds.

🧪 The Experiment

Given the design of the ContextAPI, I thought, perhaps it COULD be used for sharing and updating state. The ContextAPI has a Provider that can be wrapped around any component, to expose the data you'd like to pass down the component tree.

If you're interested in seeing what i came up with, please read on. 👏

1. Setting up the AppContext

The first order of business, was to create a Component that I could wrap around my App. This Component should be the Context Provider where I can share my state and a function to update the state from anywhere in the app.

import {createContext, useState} from "react";

const AppContext = createContext();

const AppProvider = ({children}) => {

    const [state, setState] = useState({
        profile: null,
        uiLoading: false,
        movies: []
    });

    return (
        <AppContext.Provider value={{state, setState}}>
            {children}
        </AppContext.Provider>
    );
}
export default AppProvider;

src/AppContext.js

This allowed me to easily wrap the AppProvider component around my entire app, as seen below.

...
import AppProvider from './AppContext';

ReactDOM.render(
    <React.StrictMode>
        <AppProvider>
            <App/>
        </AppProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

src/index.js

2. Reading state using a Custom Hook

Although the above worked okay, trying to update or even read the state felt very cumbersome.

The component would need to get the entire state object out of the Provider and then use state.propName when reading from the state object.

Therefor, I created a custom hook called useAppState that accepted a reducer function to get a specific state property from the state object.

export const useAppState = (reducer) => {
    // Destructure State object from Context
    const { state } = useContext(AppContext);
    return reducer(state);
}

src/AppContext.js

This allowed me to use the following code to read any property from my state object.

...

function App() {
    console.log('App.render()');

    // READ FROM APP STATE
    const profile = useAppState(state => state.profile);

    return (
        <main>
            <h1>Another Movie App</h1>
        </main>
    );
}
export default App;

src/App.js

If I need to get multiple items from state I could simply destructure from the entire state object, or write multiple lines to get the property I need.

// Using destructring
const { profile, movies } = useAppState(state => state);

// Multiple lines
const profile = useAppState(state => state.profile);
const movies = useAppState(state => state.movies);
const uiLoading = useAppState(state => state.uiLoading);

src/AnyComponent.js

I've noticed that using multiple-lines does create a duplicate AppContext object in the React developer tools. Every component that uses this function seems to get a duplicate Hook entry under hooks

Although, I'm not sure if this is only a visual indication or if the state objects are actually duplicated in the component. See below:

Apparent duplication of State objects (Not sure if it is the case)

3. Dispatch function to update state

The next step was to improve the developer experience when updating the state. Even though the set state worked fine, it wasn't a great experience having to destructure form the AppContext and constantly having provide the current state and the new state.


// Custom Hook to easily access dispatch function.
export const useDispatch = () => {
    const {dispatch} = useContext(AppContext);
    return dispatch;
}

const AppProvider = ({children}) => {

    const [state, setState] = useState({
        profile: null,
        uiLoading: false,
        movies: []
    });

    // Reusable function to update state
    const dispatch = (state) => {
        setState(currentState => {
            return {
                ...currentState,
                ...state
            };
        });
    }

    // Remove setState from value and replace with dispatch function.
    return (
        <AppContext.Provider value={{state, dispatch}}>
            {children}
        </AppContext.Provider>
    );
}
export default AppProvider;

src/AppContext.js

After making the above changes, I could now easily get the dispatch function from the AppContext using the Custom Hook.

As an example, if I wanted to update the profile, I could do use something like this:

import {useDispatch} from "../../AppContext";

const Login = () => {

    // Get dispatch from AppContext
    const dispatch = useDispatch();

    const onLoginClick = () => {
        dispatch({
            profile: {
                name: 'Bird Person',
            }
        });
    }

    return (
        <main>
            <button onClick={ onLoginClick }>Login</button>
        </main>
    )
}
export default Login

src/components/Login/Login.js

The above code shows that you can simply pass in an object with the properties relating to the state you'd like to update.

Any component that uses the useAppState hook would also be re-rendered with the updated state.

Edit: 21.05.2021 📋 This behaviour could also be a caveat of the solution. As pointed out by @dikamilo in the comments, ANY component that uses the useAppState will reload. This severely limits app scalability.
End Edit

You can now also, quite easily, update multiple state values using this pattern:

...

dispatch({
    movies: response.data,
    uiLoading: false,
});

This is the basis of the idea. You can of course do a lot more to optimise and improve the code.

🔎 Findings

I found that the lack of debugging tools makes this a poor choice for real-world applications. If you would like to make a small prototype, or a simple app that has very little state, the approach could work fine. Beyond that I can't say that this would be a great development experience due to the lack of debugging.

You can track the state in the React DevTools.

I would however not consider using this as a solution above established state management tools already available.

Have you ever tried something like this before? Do you have a better approach. Feel free to add comments or insights you might have!

🤓 Thanks for reading 🙏

React: I like RxJS

Dewald Els — Sun, 22 Nov 2020 11:44:24 +0000

⚠️ Heads up: ⚠️ This article is an opinion and experiment. I am open to comments and criticisms of this approach.

UPDATE: 23 November 2020

After the tremendous kind and helpful comments I've reworked my initial idea. It's completely changed but so far I think it's and improvement.

I've unintentionally ended up with a very Redux-esque solution. So I think I'm going to call the end of the experiment. :) I have learnt a lot about available options for React and also some new things using RxJS.

Thanks again for all the kind comments and pointers. As well as links to the awesome projects that are up and running.

useStore Custom Hook

import { store$ } from "./store";
import { useEffect, useState } from "react";

function useStore(stateToUse, defaultValue = []) {

    const [ state, setState ] = useState(defaultValue)

    useEffect(() => {
        const sub$ = store$.subscribe(data => {
            setState(data[stateToUse])
        })

        return () =>  sub$.unsubscribe()
    },[stateToUse])

    return state
}

export default useStore

Hooks/useStore.js

Store.js - Central App state

import {Subject} from "rxjs";

let AppState = {
    movies: []
}

export const store$ = new Subject();
export const dispatcher$ = new Subject()

dispatcher$.subscribe(data => {
    switch (data.action) {
        case 'GET_MOVIES':
            fetch('http://localhost:5000/movies')
                .then(r => r.json())
                .then(movies => {
                    AppState = {
                        ...AppState,
                        movies
                    }
                    return AppState
                })
                .then(state => store$.next(state))
            break
        case 'CLEAR_MOVIES':
            AppState = {
                ...AppState,
                movies: []
            }
            store$.next( AppState )
            break
        case 'DELETE_MOVIE':
            AppState = {
                ...AppState,
                movies: AppState.movies.filter( movie => movie.id !== data.payload )
            }
            store$.next( AppState )
            break
        case 'ADD_MOVIE':
            AppState = {
                movies: [ ...AppState.movies, data.payload ]
            }
            store$.next( AppState )
            break
        default:
            store$.next( AppState )
            break
    }
})

/store.js

Very Redux-like syntax with the added benefit of being able to do Asynchronous actions. Because the store is subscription based it will simply notify any subscriptions of the new state when it arrives.

It might be worth separating states into their own stores, this way a component does not get the entire AppState when the subscription fires .next()

Movie/MovieList.js

import React, { useEffect } from 'react'
import MovieListItem from "./MovieListItem";
import { dispatcher$ } from "../store";
import useStore from "../useStore";

const MovieList = () => {

    const movies = useStore('movies' )

    useEffect(() => {
        dispatcher$.next({ action: 'GET_MOVIES' })
    }, [])

    // unchanged JSX.
    return (
        <main>
            <ul>
                { movies.map(movie =>
                    <MovieListItem key={ movie.id } movie={movie} />
                )}
            </ul>
        </main>
    )
}

export default MovieList

/Movie/MovieList.js

This component now no longer needs a subscription in an useEffect and simply needs to dispatch the action to get movies. (Very redux-ish).

Navbar.js

import { dispatcher$ } from "../store";
import useStore from "../useStore";

const Navbar = () => {

    const movieCount = useStore('movies').length

    const onClearMovies = () => {
        if (window.confirm('Are you sure?')) {
            dispatcher$.next({ action: 'CLEAR_MOVIES' })
        }
    }

    return (
        <nav>
            <ul>
                <li>Number of movies { movieCount }</li>
            </ul>
            <button onClick={ onClearMovies }>Clear movies</button>
        </nav>
    )
}

export default Navbar

/Navbar/Navbar.js

END OF UPDATE.

Source Code:

You can download the source code here:
React with RxJS on Gitlab

Introduction

If you are a serious React developer you have no doubt integrated React Redux into your applications.

React redux offers separation of concerns by taking the state out of the component and keeping it in a centralised place. Not only that it also offers tremendous debugging tools.

This post in no way or form suggests replacing React Redux or The ContextAPI.

👋 Hello RxJS

RxJS offers a huge API that provides any feature a developer could need to manage data in an application. I've not ever scratched the surface of all the features.

In fact, this "experiment" only uses Observables and Subscriptions.

If you're not familiar with RxJS you can find out more on their official website:

RxJS Official Documentation

RxJS in React

I'll be honest, I haven't done a Google search to see if there is already a library that uses RxJS in React to manage state...

BUT, To use RxJS in React seems pretty straight forward. I've been thinking about doing this experiment for some time and this is that "version 0.0.1" prototype I came up with.

My main goal is simplicity without disrupting the default flow of React Components.

🤷‍♀️ What's the Problem?

Simply put: Sharing state

The problem most beginners face is sharing state between unrelated components. It's fairly easy to share state between parents and child components. Props do a great job. But sharing state between siblings, are far removed components become a little more challenging even in small apps.

As an example, sharing the number of movies in your app between a MovieList component and a Navbar component.

The 3 options that I am aware of:

Lifting up the state: Move the component state up to it's parent, which in most cases will be an unrelated component. This parent component now contains unrelated state and must contain functions to update the state.
ContextAPI: Implement the ContextAPI to create a new context and Provide the state to components. To me, This would probably be the best approach for this scenario.
React Redux: Add React Redux to your tiny app and add layers of complexity which in a lot of cases are unnecessary.

Let's go off the board for Option number 4.

🎬 React Movies App

I know, cliche, Todo's, Movies, Notes apps. It's all so watered down, but here we are.

Setup a new Project

I started off by creating a new React project.

npx create-react-app movies

Components

After creating the project I created 3 components. The components MovieList, MovieListItem and Navbar are simple enough. See the code below.

MovieList.js

import React, { useState } from 'react'

const MovieList = () => {
    const [ movies, setMovies ] = useState([])
    return (
        <main>
            <ul>
                { movies.map(movie =>
                    <MovieListItem key={ movie.id } movie={movie} /> 
                )}
            </ul>
        </main>
    )
}
export default MovieList

Movie/MovieList.js

MovieListItem.js

const MovieListItem = ({ movie }) => {

    const onMovieDelete = () => {
        // Delete a movie
    }

    return (
        <li onClick={ onMovieDelete }>
            <div>
                <img src={ movie.cover } alt={ movie.title } />
            </div>
            <div >
                <h4>{ movie.title }</h4>
                <p>{ movie.description }</p>
            </div>
        </li>
    )
}

export default MovieListItem

Movie/MovieList.js

Navbar.js

import { useState } from 'react'

const Navbar = () => {
    const [movieCount, setMovieCount] = useState(0)
    return (
        <nav>
            <ul>
                <li>Number of movies { movieCount }</li>
            </ul>
        </nav>
    )
}

export default Navbar

Navbar/Navbar.js

The first thing I wanted to do is keep the state management of React. I think it works well in a component and didn't want to disrupt this flow.

Each component can contain it's own state.

🔧 Services

I come from an Angular background so the name Services felt like a good choice.

MovieService.js

The service contains a class with static methods to make use of RxJS Observables.

import { BehaviorSubject } from 'rxjs'

class MovieService {
    static movies$ = new BehaviorSubject([])

    static getMovies() {
        fetch('http://localhost:3000/movies')
            .then(r => r.json())
            .then((movies) => this.setMovies(movies))
    }

    static setMovies(movies) {
        this.movies$.next(movies)
    }

    static deleteMovie(id) {
        this.movies$.next(this.movies$.value.filter(movie => movie.id !== id))
    }

    static clearMovies() {
        this.movies$.next([])
    }
}


export default MovieService

Services/MovieService.js

This MovieService uses static methods to avoid me having to manage a single instance of the service. I did it this way to keep it simple for the experiment.

🛠 Integrating the Service into the MovieList component.

I did not want to alter the way React components work, specifically how they set and read state.

Here is the MovieList component using the Service to get and set the movies from a local server.

import React, { useEffect, useState } from 'react'
import MovieService from "../Services/Movies"
import MovieListItem from "./MovieListItem";

const MovieList = () => {

    // Keep the way a component uses state.
    const [ movies, setMovies ] = useState([])

    // useEffect hook to fetch the movies initially.
    useEffect(() => {
        // subscribe to the movie service's Observable.
        const movies$ = MovieService.movies$.subscribe(movies => {
            setMovies( movies )
        })

        // Trigger the fetch for movies.
        MovieService.getMovies()

        // Clean up subscription when the component is unmounted.
        return () => movies$.unsubscribe()

    }, [])

    // unchanged JSX.
    return (
        <main>
            <ul>
                { movies.map(movie => 
                    <MovieListItem key={ movie.id } movie={movie} /> 
                )}
            </ul>
        </main>
    )
}

export default MovieList

Movie/MovieList.js - with Service

Accessing data in an unrelated component

At this point, the movie data is stored in the Observable (BehaviorSubject) of the MovieService. It is also accessible in any other component by simply subscribing to it.

Navbar - Getting the number of movies

import { useEffect, useState } from 'react'
import MovieService from "../Services/Movies"

const Navbar = () => {

    const [movieCount, setMovieCount] = useState(0)

    useEffect(() => {
        // subscribe to movies
        const movies$ = MovieService.movies$.subscribe(movies => {
            setMovieCount( movies.length )
        })
        return () => movies$.unsubscribe()
    })

    return (
        <nav>
            <ul>
                <li>Number of movies { movieCount }</li>
            </ul>
        </nav>
    )
}

export default Navbar

Navbar/Navbar.js - with Service

The default flow of the component remains unchanged. The benefit of using the subscriptions is that only components and its children subscribing to the movies will reload once the state updates.

🗑 Deleting a movie:

To take this a step further, we can test the subscriptions by create a delete feature when a movie is clicked.

Add Delete to the MovieListItem Component

import MovieService from "../Services/Movies";
import styles from './MovieListItem.module.css'

const MovieListItem = ({ movie }) => {

    // Delete a movie.
    const onMovieDelete = () => {
        if (window.confirm('Are you sure?')) {
            // Delete a movie - Subscription will trigger
            // All components subscribing will get newest Movies.
            MovieService.deleteMovie(movie.id)
        }
    }

    return (
        <li onClick={ onMovieDelete } className={ styles.MovieItem }>
            <div className={ styles.MovieItemCover }>
                <img src={ movie.cover } alt={ movie.title } />
            </div>
            <div className={ styles.MovieItemDetails }>
                <h4 className={ styles.MovieItemTitle }>{ movie.title }</h4>
                <p>{ movie.description }</p>
            </div>
        </li>
    )
}

export default MovieListItem

Movie/MovieListItem.js - Delete a movie

This change above is very simple. None of the other components needs to change and will received the latest state because it is subscribing to the Service's BehaviorSubject.

👨🏻‍🏫 What I learnt?

Well, there are many ways to skin a cat. The main drawback of using this approach is sacrificing the React Redux DevTools. If an application grows I have a suspicion all the subscriptions could become cumbersome and hard to debug.

Tools like RxJS Spy could be a solution to keep track and debug your code.

Simplicity

I do enjoy the simplicity of this approach and it doesn't currently disrupt the default React features but tries to compliment them.

📝 I'd love to heard from you guys and get some opinions, both positive and negative.

📖 Thanks for reading!