DEV Community: sarioglu

Why I prefer "connect" over "useSelector" using redux?

sarioglu — Mon, 24 May 2021 06:52:31 +0000

It's been almost two years since new hooks have arrived into react-redux and I've had enough chance to work on multiple long-running projects that uses both the old and new approaches to connect with Redux. Here is my conclusion for short: connect is better that useSelector. Here is why:

In version 7.1.1, react-redux introduced their hooks API and updated their website with a tip that endorses hooks over the old higher-order component approach:

We recommend using the React-Redux hooks API as the default approach in your React components.
The existing connect API still works and will continue to be supported, but the hooks API is simpler and works better with TypeScript.

React hooks made a great success since it's first introduction. It enables us to write tidy and understandable logic blocks. Yet, it doesn't mean that it is a one-size-fits-all solution for every use-case.

Ease of use

I must admit that hooks are easier to grasp and use than connected components. Using connect requires more boilerplate code. It also requires to know concepts like higher-order components, bindActionCreators, etc. to understand how it actually works. On the other hand, knowing how hooks work is enough to understand useSelector and useDispatch correctly. However ease of use is not always the most important think that we consider while choosing one approach over another.

Redux is really powerful when it comes to managing application state. But with great power comes great responsibility. We should give importance to how state is structured and be picky about what should be included into it and what is not. Only the data that is needed to be long-lived and globally available should make into Redux state. From this perspective, ease of use becomes our enemy. As React's useState hook and Redux's useSelector hook offer similar API surfaces, developers tend to put most of the state to their Redux state instead of picking only necessary ones. In the long run, it becomes bloated and structured by what components need rather than data itself.

Consider following example:

const SomeComponent = () => {
  const dispatch = useDispatch();

  return (
    <div>
      {/* Component content goes here */}
      <button onClick={() => dispatch(openConfirmDialog())}>Click Me!</button>
    </div>
  );
};

const ConfirmDialog = () => {
  const isOpen = useSelector(state => state.foo.bar.isDialogOpen);

  return isOpen ? <div>{/* Dialog content goes here */}</div> : null;
};

In most cases, you don't have to put isOpen into your global application state. Avoiding prop drilling is not an excuse.

The problem here is not caused by useSelector itself. However it makes making mistakes easier. On the other hand, if we were using connect instead, we would think twice to put it into global state.

Maintainability

As Software Developers, our primary job is maintenance of existing code, not writing new ones. As once Martin Fowler said,

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."

// Detect dark theme var iframe = document.getElementById('tweet-1385573425360609281-573'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1385573425360609281&theme=dark" }

Before React's introduction of hooks, we used to use presentational components and container components to make sure that business logic is separate from UI code. Hooks have changed that approach. We can now put business logic into custom hooks and use them in multiple components. However, the same is not correct anymore for UI code. Hooks are directly wired into them and it is not possible to use them by connecting to different data sources.

useSelector is a good example of such cases. I've seen this in many codebases: Components and their sub-components were so tightly coupled into Redux state and therefore developers tended to copy their UI code and create another component instead of using the already available ones. However the solution is simple: Use connect to create a container component and let the presentational part independently available for future uses. It provides just a right amount of abstraction without much complexity.

Loose coupling

Another problem caused by using useSelector arises while writing tests for your code. As the hooks are embedded directly into your component it is impossible to test them independent of the application state. Thus, even the simplest components are required to be connected to Redux.

connect prevents this from happening as well. You can always test your presentational component independently. This allows us to write unit tests specific to that component without connecting it to Redux populated with mock data.

Conclusion

These differences might seem trivial at first glance. But it becomes more and more obvious as project grows. Therefore I suggest to use connect instead of useSelector on your projects as well. It will make things harder, yes, but sometimes in software development making something slightly harder is better to prevent immature decisions taken.

Avoiding unintended undefined values while using TypeScript Record

sarioglu — Sun, 28 Feb 2021 13:42:58 +0000

If you are already familiar with TypeScript, you must know that it provides different ways to type objects. You can use a type or an interface to strongly type your objects:



type MyObject = {
  foo: string;
  bar: boolean;
};

interface MyObject {
  foo: string;
  bar: boolean;
}

Sometimes we also use objects as key-value stores where we don't know their properties beforehand. In such cases Record utility type provided by TypeScript comes in handy:



type Record<K extends keyof any, T> = {
    [P in K]: T;
};

There's a catch though. If you use string as its key, TypeScript will assume that your object holds a value for every possible string. Consider the following example for clarity:



type Colors = Record<string, string>;

const colors: Colors = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF"
};

console.log(colors.red); // "#FF0000"
console.log(colors.yellow); // undefined

As you can see, TypeScript gives no error for colors.yellow and expects that it is a string. However it is not. We don't have a value for yellow in our object. This is especially dangerous if you try to reach to a property of value. In such case we may have Uncaught TypeError exception and our application may crush.



console.log(colors.red.toLowerCase()); // "#ff0000"
console.log(colors.yellow.toLowerCase()); // Uncaught TypeError: can't access property "toLowerCase" of undefined

Solution: Use `Partial`

To avoid such cases, we can combine Record with another utility type, Partial:



type Colors = Partial<Record<string, string>>;

Now we can use our Colors type safely and let TypScript to warn us about possible type errors.

How to store a function using React.useState

sarioglu — Wed, 09 Sep 2020 19:06:50 +0000

Sometimes things that have seen too easy to accomplish fail silently. Recently I have faced with such issue when I try to store a function in a React component to use it later. In this post, I have tried to explain my situation an its solution.

I was refactoring an old class-based React component into a functional one. I have tried to use useState hook as it usually happens. But it this case I was trying to store a function.

import React, { useState } from "react";

const MyComponent = (props) => {
  const [myFunc, setMyFunc] = useState();

  const handleClick = () => {
    const callback = props.someFunctionCall();
    setMyFunc(callback);
  };

  return (
    <button type="button" onClick={handleClick}>
      A button
    </button>
  );
};

Things seem alright at first glimpse. However when I run it, I found out that the callback function was invoked immediately.

Why?

The code seems straightforward enough. But it took a couple of minutes to realize my mistake. It is because update function of useState accepts either a value or a function to return a value:

type SetStateAction<S> = S | ((prevState: S) => S);

That's why when I passed a function to setMyFunc, React tried to get the return value of callback function by passing prevState to it as an argument.

Solution

Once you realize the problem, it is easier to solve. All we need is an arrow function to wrap our actual callback function:

setMyFunc(() => callback);

By doing that, we give React a function to get our callback function and set it properly.

You can refer to React's Hooks API Reference to find more info about it.

[Update] Using Svelte with Tailwindcss - A better approach

sarioglu — Mon, 04 Nov 2019 18:10:00 +0000

Updated 2020/01/27, GitHub link for the Sapper template is added below 🎉

I've been using Tailwind since its early days and it is a complete life changer for me. That's why I tried to use it on a project written using Svelte. Existing methods to combine these two weren't sufficient in terms of developer experience that they have provided. So, I've tried to come up with a better approach. Wish you enjoy reading!

TL;DR

I've combined Svelte's preprocessing feature and PostCSS using svelte-preprocess to handle Tailwind. You can skip the tutorial and use the template that I've published on GitHub:

sarioglu / svelte-tailwindcss-template

Template for building basic applications with Svelte

Looking for a shareable component template? Go here --> sveltejs/component-template

svelte-tailwindcss-template

This is a fork of Svelte's project template to enable usage of Tailwindcss. Refer to https://github.com/sveltejs/template for more info.

To create a new project based on this template using degit:

npx degit sarioglu/svelte-tailwindcss-template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-app
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are…

View on GitHub

Existing methods

There are several other works to integrate Tailwind into Svelte. You can even find a couple of examples under Tailwind's GitHub account.

However, these methods have some structural weaknesses:

They create another pipeline alongside Svelte to process external css. Tailwind will be processed by PostCSS while component styles are being processed by Svelte. That's why developers need to reconsider everything from transpiling to minimization.
They make it impossible to use directives of Tailwind (like @apply or @screen) in component styles.
They create an auto-generated css file within the codebase.

That's why I've come up with a new approach to make this integration smoother. So let's start with it:

1-Create a Svelte app

First, we need to initialize a Svelte app using the following commands. If you already have an existing one, you can skip this section.

npx degit sveltejs/template [my-svelte-project]
cd [my-svelte-project]

npm install

These commands clone the official Svelte app template and install required dependencies.

2-Initialize Tailwind

Following the previous step, install required dependencies for Tailwind integration using the following command:

npm i -D @fullhuman/postcss-purgecss postcss postcss-load-config svelte-preprocess tailwindcss

Then, run the following command to initialize Tailwind:

npx tailwind init

This will create a file named tailwind.config.js in your codebase. You can edit or replace this file to extend your Tailwind config.

3-Make the integration

In order to make the integration we'll need following two files. We'll use postcss.config.js to configure PostCSS to process styles with Tailwind. Note that PostCSS uses Purgecss to get rid of unused styles in production mode. We'll also need to whitelist css classes generated by Svelte itself since Svelte itself takes are of these.

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.html',
    './src/**/*.svelte'
  ],

  whitelistPatterns: [/svelte-/],

  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

const production = !process.env.ROLLUP_WATCH

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(production ? [purgecss] : [])
  ]
};

Tailwindcss.svelte file includes a Svelte component which only has a style definition. We'll use it to inject our utility classes into the app. global directive here means that styles of this component will be available globally.

src/Tailwindcss.svelte

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

We need to import this component into our app:

src/App.svelte

<script>
  import Tailwindcss from './Tailwindcss.svelte';
  ...
</script>

...
<Tailwindcss />
...

By doing that, we'll be able to use the classes provided by Tailwind in our app.

Finally, we'll tweak the rollup config to use svelte-preprocess to process components' styles.

rollup.config.js

import sveltePreprocess from 'svelte-preprocess'

...
svelte({
  ...
  preprocess: sveltePreprocess({ postcss: true }),
  ...
})
...

Results

Using this new approach will enable us to benefit from every feature of Tailwind by combining Svelte's preprocessing ability and PostCSS. You can use utility classes, or call directives to combine them into component styles. All those styles will be processed by Svelte without creating additional pipeline.

To demonstrate the outcome let's run the app using npm run dev command and change some styles in App.svelte:

<style>
  h1 {
    @apply bg-black text-white;
  }
</style>

You will see that styles provided by Tailwind are perfectly applied to our mighty Hello world! message. So you can start using them for a better cause!

What about Sapper?

Not a problem! You can apply the same steps to integrate Tailwind into your Sapper app. Just be sure that you've changed both client and server configs.

I've published the Sapper template to GitHub. Since it is based on the official template, you can use either of rollup and webpack setups. Here is the link:

sarioglu / sapper-tailwindcss-template

Starter template for Sapper apps

sapper-template

This is a fork of Sapper's project template to enable usage of Tailwindcss. Refer to Sapper for more info.

Getting started

Using `degit`

To create a new Sapper project based on Rollup locally, run

npx degit "sarioglu/sapper-tailwindcss-template#rollup" my-app

For a webpack-based project, instead run

npx degit "sarioglu/sapper-tailwindcss-template#webpack" my-app

degit is a scaffolding tool that lets you create a directory from a branch in a repository.

Replace my-app with the path where you wish to create the project.

Using GitHub templates

Alternatively, you can create the new project as a GitHub repository using GitHub's template feature.

Go to either sapper-template-rollup or sapper-template-webpack and click on "Use this template" to create a new project repository initialized by the template.

Running the project

Once you have created the project, install dependencies and run the project in development mode:

cd my-app
npm install # or yarn
npm run dev

…