Jak zainstalować konkretną wersję?

Biblioteka node-chromium pozwala na zainstalowanie konkretnej wersji Chromium.

Można to zrobić tak:

export NODE_CHROMIUM_REVISION=1129607

lub stworzyć plik .npmrc i dodać:

node_chromium_revision=1129607

Tylko skąd pobrać dokładną rewizję?

Skąd pobrać CHROMIUM_REVISION?

Znalazłem dwa źródła:

Pierwsza strona pozwala na wyszukiwanie na podstawie wersji przeglądarki, ale też rewizji:

https://vikyd.github.io/download-chromium-history-version/#/

Druga wyświetla datę wypuszczenia Chromium + rewizję:

https://registry.npmmirror.com/binary.html?path=chromium-browser-snapshots/

Czym jest useReducer?

useReducer to hook, który służy do rozdzielenia logiki zarządzania stanem a renderowaniem. Jest to szczególnie przydatne, gdy stan komponentu jest bardziej złożony niż proste typy takie jak: string czy number. Na przykład tablica elementów. Manipulowanie danymi jak: dodawanie, edytowanie i kasowanie sprawia, że komponent coraz bardziej się rozrasta. Dzięki useReducer można przenieść całą logikę zarządzania stanem do jednego miejsca.

Podobny jest do useState. useReducer powinno się używać do zarządzania stanem, który jest bardziej złożony niż proste typy.

Składnia useReducer

Użycie useReducer jest bardziej złożone niż useState. Przyjmuje dwa parametry:

const [state, dispatch] = useReducer(reducer, initialState)

Pierwszy parametr to funkcja, która będzie zarządzać stanem. To tam znajduje się cała logika odpowiedzialna za przetwarzanie danych. Drugi argument to wartość, jaką ma mieć domyślnie nasz stan.

useReducer zwraca tablicę z dwoma elementami. Pierwszy: state zawiera aktualny stan. Drugi: dispatch to funkcja, która służy do komunikacji ze stanem. Dzięki niej informujemy, jak stan powinien zostać zaktualizowany.

Jak wspomniałem do useReducer w pierwszym parametrze przekazujemy funkcję zarządzającą stanem. Przyjmuje ona dwa parametry:

function reducer(state, action)

state to aktualny stan. action to obiekt, który zawiera informacje, jak stan ma zostać zaktualizowany.

Przykłady

Przykład 1

import React, { useReducer } from 'react';

const ACTIONS = {
    INCREMENT: 'increment',
    DECREMENT: 'decrement',
    RESET: 'reset'
}
const initialState = {
    counter: 0
}

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.INCREMENT:
            return {
                counter: state.counter + 1
            };

        case ACTIONS.DECREMENT:
            return {
                counter: state.counter - 1
            };

        case ACTIONS.RESET:
            return {
                counter: 0
            };

        default:
            throw Error('Reducer: Unknown action!');
    }
}

const App = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <>
            <div>
                <h1>{state.counter}</h1>
            </div>
            <div>
                <button onClick={() => {
                    dispatch({ type: ACTIONS.INCREMENT })
                }}>Increment</button>

                <button onClick={() => {
                    dispatch({ type: ACTIONS.DECREMENT })
                }}>Decrement</button>

                <button onClick={() => {
                    dispatch({ type: ACTIONS.RESET })
                }}>Reset</button>
            </div>
        </>
    );
}

Przykład 2

import React, { useState, useReducer } from 'react';

const ACTIONS = {
    ADD: 'add',
    REMOVE: 'remove',
}

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.ADD:
            return [...state, action.payload.item];

        case ACTIONS.REMOVE:
            return state.filter((item) => item.id !== action.payload.id);

        default:
            throw Error('Reducer: Unknown action!');
    }
}

const ItemList = ({ id, title, dispatch }) => {
    return (
        <>
                <strong>{title}</strong>
                <button onClick={() => {
                    dispatch({ type: ACTIONS.REMOVE, payload: { id }, })
                }}>Remove</button>

        </>
    )
}

function newItem(title) {
    return {
        title,
        id: Date.now()
    }
}

const App = () => {
    const [title, setTitle] = useState('');
    const [state, dispatch] = useReducer(reducer, []);

    return (
        <>
            <div>
                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
                <button onClick={() => {
                    dispatch({
                        type: ACTIONS.ADD,
                        payload: {
                            item: newItem(title)
                        }
                    });
                    setTitle('');
                }}>Add</button>
            </div>
            <div>
                <ul>
                    {state.map((item) => {
                        return <li key={item.id}><ItemList id={item.id} title={item.title} dispatch={dispatch} /></li>
                    })}
                </ul>
            </div>
        </>
    );
}

Mija drugi rok działalności mojego bloga.

W ciągu 12 miesięcy opublikowałem 92 wpisy.

Dodałem nowy dział: Demo.

Opublikowałem także 17 komiksów.

W marcu opublikowałem 5 wpisów:

JavaScript:

1. Ścieżki absolutne
2. Jak rzutować string na wartość typu boolean?

React:

1. Do czego służy useRef?

Webstorm:

1. Jak skonfigurować ścieżki absolutne?

Narysowałem jeden komiks:

1. Eat that frog!

Przeczytałem jedną książkę:

1. Krwawy południk - Cormac McCarthy

Przesłuchałem trzy audiobooki:

1. Virion. Zamek. Tom 1 - Andrzej Ziemiański
2. Ptaki i inne opowiadania - Daphne Du Maurier
3. Ślady - Jakub Małecki

Boolean jako string

Załóżmy, że backend zwraca dane w takiej postaci:

{
	property1: 'true',
	property2: 'false'
}

Jak widać wartości, zwracana są w postaci ciągu znaków. My potrzebujemy zmienić je w typ boolean. Jak to zrobić?

Jak zmienić string w typ boolean?

Najłatwiej można zrobić to tak:

const stringValue = 'true';
const value = stringValue === 'true'; // true

Ale uwaga na:

'True' === 'true'; // false
'TRUE' === 'true'; // false

Ten problem można rozwiązać na przykład tak:

'True'.toLowerCase() === 'true'; // true
'FALSE'.toLowerCase() === 'true'; // false

Powyższy zapis można jeszcze usprawnić:

String('True').toLowerCase() === 'true'; // true
String('FALSE').toLowerCase() === 'true'; // false

Jest to szczególnie przydatne jeśli nie masz kontroli nad tym, co jest zwracane.