DEV Community: Anatolii

Stop using CSS, use JSS instead.

Anatolii — Tue, 24 Aug 2021 12:16:35 +0000

Introduction

How you will make this with css?

You are not able to make it theoretically and practically with css.

This is one of the all reasons why CSS sucks versus JSS.
For sure, JSS have more functionality with React, but who in 2021 are using vanilla JS?

About JSS

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others.

JSS features

Real CSS.
Collision-free selectors.
Code reuse.
Ease of removal and modification.
Dynamic styles.
User-controlled animations.
Critical CSS.
Plugins.
Expressive syntax.
Full isolation.
React integration.
JavaScript build pipeline.

Small project as example

Setuping Environment

Stack: Nextjs, Typescript, Jss

yarn create next-app --typescript

yarn add react-jss jss-plugin-template jss-plugin-global jss-plugin-nested jss-plugin-camel-case jss-plugin-default-unit jss-plugin-compose

Of course we need add JSS and some plugins.

So create file pages/_document.tsx (to set up ssr)

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang={'en'}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const registry = new SheetsRegistry();
  const generateId = createGenerateId();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) =>
        (
          <JssProvider registry={registry} generateId={generateId}>
            <App {...props} />
          </JssProvider>
        ),
    });
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        <style id={'server-side-styles'}>{registry.toString()}</style>
      </>
    ),
  };
};

All what we do here its adding necessary JSS SheetsRegisty to our default ctx.renderPage manually so that the whole react tree gets the required stylesheet.
The following snippet shows the available option we can use on ctx.renderPage.

After that delete folder styles because now ̶y̶o̶u̶r̶ ̶l̶i̶f̶e̶ ̶b̶e̶c̶o̶m̶e̶s̶ ̶b̶e̶ ̶b̶e̶t̶t̶e̶r̶ we will not be need css more.

In pages/_app.tsx (this story just about example of jss, in real life dont use this archetecture, instead use state management util and split up your providers in different Layouts (you can read another story about some structure moments link ))

import type { AppProps } from 'next/app';
import { useState } from 'react';
import { ThemeProvider } from 'react-jss';

const _App = ({ Component, pageProps }: AppProps) => {
  const initialTheme = {
    background: '#222222',
    text: '#e7f1fe',
  };

  const [theme, setTheme] = useState(initialTheme);

  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} setTheme={setTheme} />
    </ThemeProvider>
  );
};
export default _App;

So here we wrapping <Component {...pageProps} setTheme={setTheme}/> with <ThemeProvider theme={theme}> and upper we initializate with hook useState [theme, setTheme] so then we need move to file pages/index.tsx

With ts, as we will receive props in index.tsx we need write type which will be describes which props we will receive

type ThemeType = { [Property in 'background' | 'text']: string };
type AppPropsType = {
 setTheme: Dispatch<SetStateAction<{ThemeType>> 
};

and here we adding ThemeType.
Finally lets try to add styling with JSS, for do it we need

const useStyles = createUseStyles(({ background, text }: ThemeType) => ({}));

so in first param we can get access of our theme properties and for better code lets give type for this params.
Then as returning value we will write styling code,
as we added jss-plugin-global we have opportunity to change gloabal styling, as example lets nullity default browser styles, to do that in returning object we need add key '@global' with value { body: {padding: 0,margin: 0,},},
as least in result we should have

const useStyles = createUseStyles(({ background, text }: ThemeType) => ({
  '@global': {
    body: {
      padding: 0,
      margin: 0,
    },
  },
}));

then, lets add some class

  container: {
    background,
    color: text,
    width: '100vw',
    height: '100vh',
    font: { family: 'monospace', size: 20 },
  },

as you see we don't need to write fonFamily or fontSize,
we can easyly structurate it with object with key font.
Then, in body of App component, we will use our useStyles by

 const { container } = useStyles();
 return <div className={container}>App</div>;

and all code of this file

import { SetStateAction } from 'react';
import { Dispatch, FC } from 'react';
import { createUseStyles } from 'react-jss';

type ThemeType = { [Property in 'background' | 'text']: string };
type AppPropsType = { setTheme: Dispatch<SetStateAction<ThemeType>> };

const useStyles = createUseStyles(({ background, text }: ThemeType) => ({
  '@global': {
    body: {
      padding: 0,
      margin: 0,
    },
  },
  container: {
    background,
    color: text,
    width: '100vw',
    height: '100vh',
    font: { family: 'monospace', size: 20 },
  },
}));

const App: FC<AppPropsType> = () => {
  const { container } = useStyles();
  return <div className={container}>App</div>;
};
export default App;

Finally lets test this part by command

yarn dev

as we setup our theme, we should have (dark background, and white text color)

For sure, u easyly can make this with css, yeah, so right now will be advanced features
we can create

const CENTERED_FLEX_CONTAINER = 'centered-flex-container'

so then we can use it as

  [CENTERED_FLEX_CONTAINER]: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },

and then due to we added plugin jss-plugin-compose we can use in

container: {
    composes: [`$${CENTERED_FLEX_CONTAINER}`],
    //other code
},

For see killer-feature we need to create function which will generate random color, function:

  const toGetRandomColor = () => `#${Math.random().toString(16).substr(-6)}`;

and with hook useEffect make inverval function which in every iteration set new color

  const [color, setColor] = useState(theme.text);

  useEffect(() => {
    const interval = setInterval(() => {
      setColor(toGetRandomColor());
    }, 420);
    return () => clearInterval(interval);
  }, []);

then we need paste our random color to useStyles

const { container } = useStyles({ color } as any);

and in useStyles add new class

colorContainer: ({ color }: any) => ({ color })

so at least in every 0.42 sec we will see updated class, so in dev tools you can see that its not an inline styling, class dynamicly changes value, that is absolute awesome, so then for test that our theme can be dynamiclty changed lets get the theme we can easyly do this with useTheme hook

After than, we need an array with theme keys so:

  const themeKeysArr = Object.keys(theme) as (keyof ThemeType)[];

so then in jsx lets add simple inputs construction

 {themeKeysArr.map((name) => {
   return (
     <input value={theme[name]} placeholder={name.toUpperCase()} onChange={onChange} name={name} key={name} />
    );
  })}

after that lets add some styling to inputs

  inputsContainer: {
    margin: [8, 0, 0, 0],
    padding: 10,
    '& input': {
      outline: 'none',
      border: '1px solid',
      borderRadius: 8,
      padding: [6, 8],
      margin: [0, 4],
      color: text,
      background: 'transparent',
    },
  },

In JSS & have the same logic as have in Sass, also using [8, 0, 0, 0] we can setup (marginTop - 8, margin(right, vbottom, left) is equal to zero).
Then lets add class container with this styling:

  contentContainer: {
    composes: [`$${CENTERED_FLEX_CONTAINER}`],
    flex: { direction: 'column' },
  }

Finally lets update our jsx part with this code:

    <div className={`${container} ${colorContainer}`}>
      <div className={contentContainer}>
        <div>STOP USE CSS, USE JSS INSTEAD.</div>
        <div className={inputsContainer}>
          {themeKeysArr.map((name) => {
            return (
              <input value={theme[name]} placeholder={name.toUpperCase()} onChange={onChange} name={name} key={name} />
            );
          })}
        </div>
      </div>
    </div>

for sure we need destructurate other classes with: const { container, contentContainer, inputsContainer, colorContainer } = useStyles({ color } as any); and to add multi classes we need use (ES6 syntax) at least we should have something like that:

And final code:

import { ChangeEventHandler, SetStateAction, useEffect, useState } from 'react';
import { Dispatch, FC } from 'react';
import { createUseStyles, useTheme } from 'react-jss';

type ThemeType = { [Property in 'background' | 'text']: string };
type AppPropsType = { setTheme: Dispatch<SetStateAction<ThemeType>> };

const CENTERED_FLEX_CONTAINER = 'centered-flex-container';

const useStyles = createUseStyles(({ background, text }: ThemeType) => ({
  '@global': {
    body: {
      padding: 0,
      margin: 0,
    },
  },
  [CENTERED_FLEX_CONTAINER]: {
    display: 'flex',  <div className={`${container} ${colorContainer}`}>
      <div className={contentContainer}>
        <div>STOP USE CSS, USE JSS INSTEAD.</div>
        <div className={inputsContainer}>
          {themeKeysArr.map((name) => {
            return (
              <input value={theme[name]} placeholder={name.toUpperCase()} onChange={onChange} name={name} key={name} />
            );
          })}
        </div>
      </div>
    </div>
    alignItems: 'center',
    justifyContent: 'center',
  },

  container: {
    composes: `$${CENTERED_FLEX_CONTAINER}`,
    background,
    font: { family: 'monospace', size: 20 },
    width: '100vw',
    height: '100vh',
  },

  colorContainer: ({ color }: any) => ({ color }),

  contentContainer: {
    composes: [`$${CENTERED_FLEX_CONTAINER}`],
    flex: { direction: 'column' },
  },

  inputsContainer: {
    margin: [8, 0, 0, 0],
    padding: 10,
    '& input': {
      outline: 'none',
      border: '1px solid',
      borderRadius: 8,
      padding: [6, 8],
      margin: [0, 4],
      color: text,
      background: 'transparent',
    },
  },
}));

const App: FC<AppPropsType> = ({ setTheme }) => {
  const theme = useTheme<ThemeType>();
  const [color, setColor] = useState(theme.text);

  const toGetRandomColor = () => `#${Math.random().toString(16).substr(-6)}`;

  useEffect(() => {
    const interval = setInterval(() => {
      setColor(toGetRandomColor());
    }, 420);
    return () => clearInterval(interval);
  }, []);

  const { container, contentContainer, inputsContainer, colorContainer } = useStyles({ color } as any);

  const onChange: ChangeEventHandler<HTMLInputElement> = ({ target: { value, name } }) => {
    setTheme((state) => ({ ...state, [name]: value }));
  };
  const themeKeysArr = Object.keys(theme) as (keyof ThemeType)[];

  return (
    <div className={`${container} ${colorContainer}`}>
      <div className={contentContainer}>
        <div>STOP USE CSS, USE JSS INSTEAD.</div>
        <div className={inputsContainer}>
          {themeKeysArr.map((name) => {
            return (
              <input value={theme[name]} placeholder={name.toUpperCase()} onChange={onChange} name={name} key={name} />
            );
          })}
        </div>
      </div>
    </div>
  );
};
export default App;

Conclusion

Its just a small part of all features of jss, but this small example can give you big opportunity and understating of jss.

Thanks for reading, I so appreciate this ♥.

Awesome VS Code setup

Anatolii — Wed, 18 Aug 2021 19:18:44 +0000

Introduction

So I have been spending a lot ( so much ) time creating the best coding setup, this story is intended for Javascript or Typescript dev.

Extensions as separate parts

1. Color Theme

So this color theme is free to use(something u will need to click to close button ), but you will have the best opportunity to make your coding process so lovely Monokai Pro (spectrum palette is my choice)

Another color theme variants

2. Font

This part is so important, but I need to warn you when you will start using this font, after that, you will not able to use another one because this font is almost perfect ( this font don't have ligatures), but don't worry I added to this font ligatures, and in the near future will write a story about it so you can buy in this site or download for free from some repo in github Operator mono (medium is my choice)
✳important to better coding effect additionally install italic variant, because Monokai Pro color theme supports multi types of fonts

3. Icon theme

The most beautiful icon theme (at this moment, which I found) is Material Icon Theme. I think 34 million downloads something matter)

4.Product icon theme

At least default icons are not bad, but personally, I more prefer Carbon Product Icons(my choice) or you can try Fluent Icons.

Final view of these four setups
(random project as example)

Main Extensions

At first, extensions which I use everywhere

Project Manager, this extension gives u the opportunity to easily open your projects with paths which you will set up, it will be useful when you need some part of code in some project, and with this extension, you can easily navigate. Also, great alternative Project Dashboard
Indent Rainbow, in this img, not the best ilustration, but I totaly recommend use this extension, this effect I setuped in setting.json with this config just changing alpha of black color, can be custom, for sure.
Colorful Commentsthis extension will help you create more human-friendly comments in your code. With this Extension, you will be able to categorize your code by a special color. Also, you can manually change colors in settings, and if you want u can add a background color. And here u can see integration with italic font type of Operator mono font.
Change case give you the opportunity to quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word. So useful with a custom keyboard shortcut or Shift + Ctrl + P.
Save all, if you working on a big project as always if u running a server with nextjs for example, everyone knows that saving the file by open, will at any time re-build it, so this extension partially resolves this problem.
Toggle Quotes, with Ctrl and some selection you can ```npm

easily change quotes type from '' to "" or {% raw %}`

Bracket Pair Colorizer 2, with this config react "bracket-pair-colorizer-2.colors": ["Gold", "Orchid", "LightSkyBlue"], "bracket-pair-colorizer-2.colorMode": "Independent", "bracket-pair-colorizer-2.highlightActiveScope": true, "bracket-pair-colorizer-2.showBracketsInGutter": true, as example
Image preview, the name says everything for itself, near a number of lines you will see a small preview of the image.
Highlight Matching Tag, small but useful tag highlighting extensions
Path Intellisense the must-have extensions that autocomplete filenames.

For database control

For REST process

Other extensions

Also, additional extensions which everybody knowns

Conclusion

For sure you can use all extensions which I describe, but most likely it will so laggy, so better practice (if you use this extension not often) is to use the extension only when you need it. And yeah, I know that everybody knows that, but probably this story will useful for somebody.

Thanks for reading, I so appreciate this ♥.

20 crazy ways to get Infinity in javascript

Anatolii — Thu, 12 Aug 2021 13:07:42 +0000

I have 0 ideas why you need this in real codding life, but who knows what will be if some crazy guy will ask you in your next interview). For sure thats not all ways, but that's more than normally people know (at least).

Infinity === 1.8e+308 one of the easiest way, but it's about unexpected ways, I guess)

2 ** (1025 ^ true)
Date.now() ** (96 >>> '0')
Array(4).fill(10).reduce((acc,number)=>acc ** number)
Array.from({length:2},(__,idx)=> Math.PI ** 8).map((el,idx,arr)=> arr[idx - 1] ** el)[1]
Number.MAX_VALUE ** (true + 0.08)

+'Infinity'
-'-Infinity'
Number.POSITIVE_INFINITY
-`${Number.NEGATIVE_INFINITY}`
+`${Array.from({length:0xFF},(__,idx)=> idx).join('')}` 

-Math.log(0)
Math.atanh(1)
Math.min(...[])
-Math.max(...[])

true / false
!'' / !!''
((!~~Infinity) + !1)  / ~~Infinity
Math.cosh(0) / !(!!-Math.cosh(0))
!!Array.from({length:1}) / Array.from({length:0})

If you think up a better-unexpected example, just tell in comments, I guess that's will be funny,
Thanks for reading, I so appreciate this ♥.

Best Redux Architecture

Anatolii — Wed, 11 Aug 2021 23:22:46 +0000

Intoduction

I want to warn people, which probably will remark about architecture, I absently appreciate your opinion, so if u find some remarks, just tell in comments, thanks.
Stack: React, NextJs, Typescript, Redux.

The ideology of this post isn't to write app, its about how powerful is redux with typescript in react of course, and we will use nextjs to write some example api requests.

So lets get started

First step is so simple

npx create-next-app --typescript

So then we installing npm dependency

npm i redux react-redux redux-thunk reselect

Also you can delete all usless files.

At first, add folder store in root folder and there create a file index.tsx, consequently folder modules and in this folder we creating another file index.ts, also here another folder with name App.

So store folder should look like that

After that, move to store/modules/App and creating base module structure:
index.ts, action.ts, enums.ts, hooks.ts, reducers.ts selectors.ts, types.ts

enum.ts(for every new action u need new property in [enum]https://www.typescriptlang.org/docs/handbook/enums.html)

export enum TypeNames {
  HANDLE_CHANGE_EXAMPLE_STATUS = 'HANDLE_CHANGE_EXAMPLE_STATUS' 
}

2.Then to make magic we need to install dev dependency -utility-types
types.ts - the imortant part

import { $Values } from 'utility-types';
import { TypeNames } from './enums';

Just import TypeNames and $Values

export type AppInitialStateType = {
  isThisArchitecturePerfect: boolean;
};

Describes which type have AppState

export type PayloadTypes = {
  [TypeNames.HANDLE_CHANGE_EXAMPLE_STATUS]: {
    isThisArchitecturePerfect: boolean;
  };
};

export type ActionsValueTypes = {
  toChangeStatusOfExample: {
    type: typeof TypeNames.HANDLE_CHANGE_EXAMPLE_STATUS;
    payload: PayloadTypes[TypeNames.HANDLE_CHANGE_EXAMPLE_STATUS];
  };
};

That's the code we need to tell our reducers which type of different actions we have.
specification* toChangeStatusOfExample can have just a random name, but I also give the identical name as (action function, but its a little bit soon)

export type AppActionTypes = $Values<ActionsValueTypes>

In this step we need to make typescript magic, we will see soon, what magic I am telling.

So in result our types.ts file should look like that

import { $Values } from 'utility-types';
import { TypeNames } from './enums';

export type PayloadTypes = {
  [TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE]: {
    isThisArchitecturePerfect: boolean;
  };
};

export type ActionsValueTypes = {
  toChangeStatusOfExample: {
    type: typeof TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE;
    payload: PayloadTypes[TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE];
  };
};
export type AppActionTypes = $Values<ActionsValueTypes>;

export type AppInitialStateType = {
  isThisArchitecturePerfect: boolean;
};

You can presume that it is so bulky and over-coding, but if you appreciate your time its will give you the opportunity to save a lot of time in the future.

3.So next move to file reducers.ts

import { TypeNames } from './enums';
import { AppActionTypes, AppInitialStateType } from './types';

As always at first we import modules.

const initialState: AppInitialStateType = {};

Remarkably, as you see, it a typescript magic, because we have given to initialState the type AppInitialStateType where was describes that's const should have property isThisArchitecturePerfect, isThisArchitecturePerfect,

so when we will started to write something, we will again see the typescript magic.

Consequently, when we will start to write something, we will again see the typescript magic.

export const appReducer = (state = initialState, action: AppActionTypes): AppInitialStateType => {
  switch (action.type) {
    default:
      return state;
  }
};

Pro temporary nothing special, just basic redux reducer with switch construction.

In index.ts we just exporting our appReducer with default construction.

import { appReducer as app } from './reducers';
export default app;

At least right now we should have something like that

//enum.ts**

export enum TypeNames {
  HANDLE_CHANGE_STATUS_OF_EXAMPLE = 'HANDLE_CHANGE_STATUS_OF_EXAMPLE',
}

//types.ts**

import { $Values } from 'utility-types';
import { TypeNames } from './enums';

export type PayloadTypes = {
  [TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE]: {
    isThisArchitecturePerfect: boolean;
  };
};

export type ActionsValueTypes = {
  toChangeStatusOfExample: {
    type: typeof TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE;
    payload: PayloadTypes[TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE];
  };
};
export type AppActionTypes = $Values<ActionsValueTypes>;

export type AppInitialStateType = {
  isThisArchitecturePerfect: boolean;
}

//reducers.ts

import { TypeNames } from './enums';
import { AppActionTypes, AppInitialStateType } from './types';

const initialState: AppInitialStateType = {
  isThisArchitecturePerfect: true,
};
export const appReducer = (state = initialState, action: AppActionTypes): AppInitialStateType => {
  switch (action.type) {
    default:
      return state;
  }
}; 

//index.ts
import { appReducer as app } from './reducers';
export default app;

So if yes, my congradulation, but what not all, then in store/modules/index.ts

export { default as app } from './App';

This is a feature of es6 js.

And then we should connect it in store/index.ts by coding this :

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import * as reducers from './modules';

const combinedRedusers = combineReducers({ ...reducers });
const configureStore = createStore(combinecRedusers, compose(applyMiddleware(thunkMiddleware)));

export default configureStore;

* as reducers will import all reducers which you import in prev step, for sure we applying thunkMiddleware to async code. And exporting store of course.

After this, we need connect store to our pages/_app.tsx file, so we can do that by:

Creating inlayouts folder StoreLayout, here create index.tsx which have <Provider store={store}>{children}</Provider>, I get sm like that:

import { FC } from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import store from './../../store';

const StoreLayout: FC = ({ children }) => {
  return <ReduxProvider store={store}>{children}</ReduxProvider>;
};

export default StoreLayout;

2.The main feature of layouts its that firstly we creating layouts/index.tsx file with this code:

import { FC } from 'react';

export const ComposeLayouts: FC<{ layouts: any[] }> = ({ layouts, children }) => {
  if (!layouts?.length) return children;

  return layouts.reverse().reduce((acc: any, Layout: any) => <Layout>{acc}</Layout>, children);
};

The main idea isn't to have the nesting of your Providers because at least you will have a lot of different Providers. We can make it so simple withreduce().
And finally in pages/_app.tsx we need change default next code to our

import type { AppProps } from 'next/app';
import StoreLayout from '../layouts/StoreLayout';
import { ComposeLayouts } from '../layouts/index';

const _App = ({ Component, pageProps }: AppProps) => {
  const layouts = [StoreLayout];

  return (
    <ComposeLayouts layouts={layouts}>
      <Component {...pageProps} />
    </ComposeLayouts>
  );
};
export default _App;

Of course, we want that our state isn't be static, so to do that we need to move to store/modules/App/action.ts and write simple action function, like that:

import { TypeNames } from './enums';
import { AppActionTypes, PayloadTypes } from './types';

export const toChangeThemePropertyies = (
  payload: PayloadTypes[TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE]
): AppActionTypes => ({
  type: TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE,
  payload
});

The important thing is to give payload(param of function) the correct type, so because we have enum TypeNames we cannot make mistakes with type naming. And the most impressive is that when we writing that this action should return AppActionTypes(its type with all actions type), and then writing in function type: TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE, payload will automatically be found. We will see the example soon.

Also having the opportunity, open store/modules/App/selectors.ts, there we use library reselect to have access to our state, main idea that if store chaging, and we using some value from store, component will rerender without reselect so, its so powerfull. But until we start creating reducers we need to have RootStoreType and I like to creating a new global folder models and here also create file types.ts
and here:

import { AppInitialStateType } from '../store/modules/App/types';
export type RootStoreType = { app: AppInitialStateType };

In this code, we should describe RootStoreType with all reducers. Now back to store/modules/App/selectors.ts

As always:

import { RootStoreType } from '../../../models/types';
import { createSelector } from 'reselect';

Then good practice its starts naming your selector with `get

someName,like that:export const getIsThisArchitecturePerfect= createSelector()Also,createSelector` have 2 params:
Array with functions (in our case)(state:RootStoreType) =>state.app.isThisArchitecturePerfect
Function which takes in param (return values of prev Arr) and returning value which u need, Result code:

import { RootStoreType } from '../../../models/types';
import { createSelector } from 'reselect';

export const getIsThisArchitecturePerfect= createSelector(
  [(state: RootStoreType) => state.app.isThisArchitecturePerfect],
  isThisArchitecturePerfect => isThisArchitecturePerfect
);

Finally, we can test does our logic work,to do that move to pages/index.tsx; and write this code:


import { useSelector } from 'react-redux';
import { getIsThisArchitecturePerfect } from '../store/modules/App/selectors';

const Index = () => {
  const isThisArchitecturePerfect = useSelector(getIsThisArchitecturePerfect);
  console.log(isThisArchitecturePerfect);
  return <></>;
};

export default Index;

Where we import useSelector to get access to our store and paste to this how our selector, then due toconsole.log(isThisArchitecturePerfect) we will see the result.
So save all and run

npm run dev

(F12 to open dev tools), I'm kidding because everybody knows that)
I think u we ask me, that our app is so static, and I will answer, yeah, and right now, will add some dynamic. Also to have better look, let's add simple stying and jsx markup and
we need a useDispatch() to change our store and imported our action function toChangeThemePropertyies, also let's create 2 functions to change value (first to true, second to false) like that:

as u see I especially, set 'true' not true, so this is typescript magic, u always know that your code work as you expect. I don't use CSS, because I so love to use JSS, because it have unbelievable functionality, and I have zero ideas why JSS is not so popular, but it's not about styling.

import { useDispatch, useSelector } from 'react-redux';
import { toChangeThemePropertyies } from '../store/modules/App/actions';
import { getIsThisArchitecturePerfect } from '../store/modules/App/selectors';

const Index = () => {
  const isThisArchitecturePerfect = useSelector(getIsThisArchitecturePerfect);
  const dispatch = useDispatch();

  const handleSetExampleStatusIsTrue = () => {
    dispatch(toChangeThemePropertyies({ isThisArchitecturePerfect: true }));
  };
  const handleSetExampleStatusIsFalse = () => {
    dispatch(toChangeThemePropertyies({ isThisArchitecturePerfect: false }));
  };

  const containerStyling = {
    width: 'calc(100vw + 2px)',
    margin: -10,
    height: '100vh',
    display: 'grid',
    placeItems: 'center',
    background: '#222222',
  };

  const textStyling = {
    color: 'white',
    fontFamily: 'Monospace',
  };

  const buttonContainerStyling = {
    display: 'flex',
    gap: 10,
    marginTop: 20,
    alignItems: 'center',
    justifyContent: 'center',
  };

  const buttonStyling = {
    ...textStyling,
    borderRadius: 8,
    cursor: 'pointer',
    border: '1px solid white',
    background: 'transparent',
    padding: '8px 42px',
    width: '50%',
    fontSize: 18,
    fontFamily: 'Monospace',
  };

  return (
    <>
      <div style={containerStyling}>
        <div>
          <h1 style={textStyling}>{'- Is This Architecture Perfect?'}</h1>
          <h1 style={textStyling}>{`- ${isThisArchitecturePerfect}`.toUpperCase()}</h1>
          <div style={buttonContainerStyling}>
            <button style={{ ...buttonStyling, textTransform: 'uppercase' }} onClick={handleSetExampleStatusIsTrue}>
              True
            </button>
            <button style={{ ...buttonStyling, textTransform: 'uppercase' }} onClick={handleSetExampleStatusIsFalse}>
              False
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default Index;

If you attentive, i guess u know why code don't work, so try to fix this small detail by yourself, if u don't wanna.
Solution that in store/modules/App/reducers.ts we forget to write case of our reducer switch construction so to fix that we need to write this

 case TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE: {
      const { isThisArchitecturePerfect } = action.payload;
      return { ...state, isThisArchitecturePerfect };
    }

and I have feature to improve this code to

//if your action.payload is the same as property in initial state u can write like this:
//case TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE:
//case TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE1:
//case TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE2: ({ ...state, ...action.payload });
// if not, just create a new case

case TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE: ({ ...state, ...action.payload });

So right now all will be work correctly, but that not all, because as I said in the introduction we will write some simple api, so open or create pages/api and there create a file with your api route, in my case its pages/api/example, referring oficial docs

import type { NextApiRequest, NextApiResponse } from 'next';
import { ApiExampleResType } from '../../models/types';

export default (req: NextApiRequest, res: NextApiResponse<ApiExampleResType>) => {
  res.status(200).json({ title: '- Is This Architecture Perfect?' });
};

yeah, and also in models/types.ts write type

 export type ApiExampleResType = { title: string };

thats we need to 'typescript magic'. Then, we have some trobleness with due to nextjs getServerSideProps, so here we will simplify task, but at least u should use nextjs getServerSideProps in real app.

So task for you is creating your action function with payload type ApiExampleResType, just for training, if you are lazy, see result :

//enum.ts**

HANDLE_CHANGE_TITLE_OF_EXAMPLE ='HANDLE_CHANGE_TITLE_OF_EXAMPLE',  

//types.ts**

import { $Values } from 'utility-types';
import { TypeNames } from './enums';
import { ApiExampleResType } from './../../../models/types';

export type PayloadTypes = {
  [TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE]: {
    isThisArchitecturePerfect: boolean;
  };
  [TypeNames.HANDLE_CHANGE_TITLE_OF_EXAMPLE]: ApiExampleResType;
};

export type ActionsValueTypes = {
  toChangeSphereCursorTitle: {
    type: typeof TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE;
    payload: PayloadTypes[TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE];
  };
  toChangeTitleOfExample: {
    type: typeof TypeNames.HANDLE_CHANGE_TITLE_OF_EXAMPLE;
    payload: PayloadTypes[TypeNames.HANDLE_CHANGE_TITLE_OF_EXAMPLE];
  };
};
export type AppActionTypes = $Values<ActionsValueTypes>;

export type AppInitialStateType = {
  isThisArchitecturePerfect: boolean;
} & ApiExampleResType;

//reducers.ts

import { TypeNames } from './enums';
import { AppActionTypes, AppInitialStateType } from './types';

const initialState: AppInitialStateType = {
  isThisArchitecturePerfect: true,
  title: 'Nothing',
};

export const appReducer = (state = initialState, action: AppActionTypes): AppInitialStateType => {
  switch (action.type) {
    case TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE:
    case TypeNames.HANDLE_CHANGE_TITLE_OF_EXAMPLE:
      return { ...state, ...action.payload };

    default:
      return state;
  }
};

//action.ts

import { TypeNames } from './enums';
import { AppActionTypes, PayloadTypes } from './types';

export const toChangeThemePropertyies = (
  payload: PayloadTypes[TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE]
): AppActionTypes => ({
  type: TypeNames.HANDLE_CHANGE_STATUS_OF_EXAMPLE,
  payload,
});

export const toChangeTitleOfExample = (
  payload: PayloadTypes[TypeNames.HANDLE_CHANGE_TITLE_OF_EXAMPLE]
): AppActionTypes => ({
  type: TypeNames.HANDLE_CHANGE_TITLE_OF_EXAMPLE,
  payload,
});

You have written the same, my congratulations), to have access to new property of our app state, we need to write a new selector, the next step is that in selectors.ts we adding this selector

export const getTitle= createSelector(
  [(state: RootStoreType) => state.app.title],
  title => title
);

Penultimate step, is in opetations.ts
At first import all dependency

//types 
import { Action, ActionCreator, Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';
import { RootStoreType } from '../../../models/types';
import { AppActionTypes } from './types';
//action
import { toChangeTitleOfExample } from './actions';

Secondary, created the thunk function with this typeActionCreator<ThunkAction<Promise<Action>, RootStoreType, void, any>> in which we have async closure with type
(dispatch: Dispatch<AppActionTypes>): Promise<Action> =>
in which we sending fetch get request, to our /api/example and return is dispatch(toChangeTitleOfExample(awaited result)). Probably a little bit bilky, but in result we have

import { Action, ActionCreator, Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';
import { RootStoreType } from '../../../models/types';
import { toChangeTitleOfExample } from './actions';
import { AppActionTypes } from './types';

export const operatoToSetExampleTitle:
  ActionCreator<ThunkAction<Promise<Action>, RootStoreType, void, any>> =
    () =>
      async (dispatch: Dispatch<AppActionTypes>): Promise<Action> => {
      const result = await fetch('/api/example', { method: 'GET' });
      const { title } = await result.json();
      return dispatch(toChangeTitleOfExample({ title }));
    };

And the final step in pages/index.tsx:

  const title = useSelector(getTitle);

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

Its no the best practice while we use nextjs, but just as example not the worst, useEffect(()=>{...},[]) - runs only on mount, so and hooks.ts we need to use while we have repeated logic in operations.ts or reducers.ts.

Conclusion

If you anyway think that is so bulky, I guarantee that this structure is awesome if you will just try to use, then you will not be able to use another architecture.

Thanks for reading, I so appreciate this ♥.

Source code (GitHub).

Reduce is awesome ♥

Anatolii — Wed, 11 Aug 2021 08:18:45 +0000

1. Look a little bit bulky?

But fortunately, it’s not hard as can you expect.
Array.prototype.reduce() have 2 param:

CallbackFunction
InitialValue

Where first is (acc, item, idx, arr) => and returning something which have the same type as InitialValue. And InitialValue is not required, but if you use typescript it will be better to have InitialValue (if you want that InitialValue is be equal to nullity use as SomeType)

acc* — the sum of every iteration
item* — an item of the current array
idx*— index of the current array
arr* — iterable array

2. ReduceReverseFunc as SimpleExample

const reduceReverseFunc = (arr: any[]): any[] => {
  return arr.reduce((acc, item) => [item, ...acc], [] as any[]);
};

Where acc is the sum to which on every iteration we are adding a new item. For example, we give a [1, 2, 3, 4] as param to reduceReverseFunc.
1.item === 1 , acc === [] (acc equalInitialValue )
2.item === 2 , acc === [1] (acc equal the sum of the previous iteration)
3.item === 3, acc === [2, 1] (acc equal the sum…)
4.item === 4, acc === [3, 2, 1] (acc equal the sum…)
So the result will be [4, 3, 2, 1]

3. ReduceFlatFunc as RecursionExample

 const reduceFlatFunc = (arr: any[]): any[] => {
  if (!Array.isArray(arr)) return arr;
  return arr.reduce((acc, item) => acc.concat(reduceFlatFunc(item)), [] as any[]);
};

At first make a defender of error, by checking arr with Array.isArray()
And then by using Array.prototype.reduce() we iterating arr, and for every iteration call reduceFlatFunc (that's called recursion) and if we don't have a new array, our defender will return the current arr.

So if u will run this code reduceFlatFunc([1, [2], [[3]],[[[4]]]) the result will be equal to [1, 2, 3, 4]

4. ReduceSortOddNumbersFunc as TrickyExample

const reduceSortOddNumbersFunc = (arr: number[]): number[] => {
  const sortedEvenArr = arr.filter((number) => number % 2).sort((a, b) => a - b);

  const { arr: sortedArr } = arr.reduce(
    (acc, number) => {
      const isNumberOdd = !(number % 2);
      const evenIdx = isNumberOdd ? acc.evenIdx : acc.evenIdx + 1;

      const arr = [...acc.arr, isNumberOdd ? number : sortedEvenArr[acc.evenIdx]];
      return { arr, evenIdx };
    },

    { arr: [], evenIdx: 0 } as { arr: number[]; evenIdx: number }
  );

  return sortedArr;
};

Task: to write a function that takes an array as arguments and returns a new array in which all odd numbers are sorted in ascending order, while the even ones remain in their places.

Explanation

Firstly, we should write our NumberArrType.
We getting sortedEvenArr from using Array.prototype.filter() checking is number is even then using Array.prototype.sort() we sort number Arr.
Array.prototype.reduce() to arr (from param of function). Where InitialValue equal to { arr: [], evenIdx: 0 } then set type { arr: NumberArrType; evenIdx: number }using ts property as.
So then for every iteration, we check isNumberOdd .
Following, if number is odd, evenIdx will be equal to acc.eventIdx(so will be the same as in previous iteration),if not, evenIdx will be equal to acc.evenIdx + 1.
And the same logic we apply to iterable arr.
Finally, using destructuring getting arr and give another (sortedArr) name because we have the same which already using. And return, of course.

Conclusion

Don't be afraid to use Array.prototype.reduce(), because it's awesome as your life.
Thanks for reading, I so appreciate this ♥.
Source code (GitHub).