Lepsze reduktory z Immerem

Jako programista React powinieneś już znać zasadę, że stan nie powinien być bezpośrednio mutowany. Możesz się zastanawiać, co to oznacza (większość z nas miała to zamieszanie, kiedy zaczynaliśmy).

Ten samouczek odda to sprawiedliwość: zrozumiesz, czym jest niezmienny stan i jaka jest jego potrzeba. Dowiesz się również, jak używać Immera do pracy ze stanem niezmiennym i jakie są korzyści z jego używania. Kod można znaleźć w tym artykule w tym repozytorium Github.

Niezmienność w JavaScript i dlaczego to ma znaczenie

Immer.js to niewielka biblioteka JavaScript napisana przez Michela Weststrate, którego misją jest umożliwienie „pracy ze stanem niezmiennym w wygodniejszy sposób”.

Ale zanim zagłębimy się w Immer, szybko przypomnijmy sobie o niezmienności w JavaScript i dlaczego ma to znaczenie w aplikacji React.

Najnowszy standard ECMAScript (aka JavaScript) definiuje dziewięć wbudowanych typów danych. Spośród tych dziewięciu typów sześć jest określanych jako wartości/typy primitive . Tych sześć prymitywów to undefined , number , string , boolean , bigint i symbol . Proste sprawdzenie za pomocą operatora typeof w JavaScript ujawni typy tych typów danych.

 console.log(typeof 5) // number console.log(typeof 'name') // string console.log(typeof (1 < 2)) // boolean console.log(typeof undefined) // undefined console.log(typeof Symbol('js')) // symbol console.log(typeof BigInt(900719925474)) // bigint

primitive to wartość, która nie jest obiektem i nie ma metod. Najważniejszym dla naszej obecnej dyskusji jest fakt, że wartości prymitywu nie można zmienić po jego utworzeniu. Tak więc mówi się, że prymitywy są immutable .

Pozostałe trzy typy to null , object i function . Możemy również sprawdzić ich typy za pomocą operatora typeof .

 console.log(typeof null) // object console.log(typeof [0, 1]) // object console.log(typeof {name: 'name'}) // object const f = () => ({}) console.log(typeof f) // function

Te typy są mutable . Oznacza to, że ich wartości można zmienić w dowolnym momencie po ich utworzeniu.

Możesz się zastanawiać, dlaczego mam tam tablicę [0, 1] . Cóż, w JavaScriptland tablica jest po prostu specjalnym typem obiektu. W przypadku, gdy zastanawiasz się również nad null i czym różni się od undefined . undefined oznacza po prostu, że nie ustawiliśmy wartości dla zmiennej, podczas gdy null jest szczególnym przypadkiem dla obiektów. Jeśli wiesz, że coś powinno być obiektem, ale obiektu tam nie ma, po prostu zwracasz null .

Aby zilustrować prostym przykładem, spróbuj uruchomić poniższy kod w konsoli przeglądarki.

 console.log('aeiou'.match(/[x]/gi)) // null console.log('xyzabc'.match(/[x]/gi)) // [ 'x' ]

String.prototype.match powinien zwrócić tablicę, która jest typem object . Gdy nie może znaleźć takiego obiektu, zwraca null . Powrót undefined też nie miałby sensu.

Dość tego. Wróćmy do omówienia niezmienności.

Zgodnie z dokumentacją MDN:

„Wszystkie typy z wyjątkiem obiektów definiują wartości niezmienne (to znaczy wartości, których nie można zmienić).”

Ta instrukcja zawiera funkcje, ponieważ są one specjalnym typem obiektu JavaScript. Zobacz definicję funkcji tutaj.

Rzućmy okiem na to, co w praktyce oznaczają zmienne i niezmienne typy danych. Spróbuj uruchomić poniższy kod w konsoli przeglądarki.

 let a = 5; let b = a console.log(`a: ${a}; b: ${b}`) // a: 5; b: 5 b = 7 console.log(`a: ${a}; b: ${b}`) // a: 5; b: 7

Nasze wyniki pokazują, że chociaż b jest „pochodne” z a , zmiana wartości b nie wpływa na wartość a . Wynika to z faktu, że kiedy silnik JavaScript wykonuje instrukcję b = a , tworzy nową, oddzielną lokalizację w pamięci, umieszcza tam 5 i wskazuje b w tej lokalizacji.

A co z przedmiotami? Rozważ poniższy kod.

 let c = { name: 'some name'} let d = c; console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"some name"}; d: {"name":"some name"} d.name = 'new name' console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"new name"}; d: {"name":"new name"}

Widzimy, że zmiana właściwości name za pomocą zmiennej d zmienia ją również w c . Wynika to z faktu, że kiedy silnik JavaScript wykonuje instrukcję c = { name: 'some name ' } , silnik JavaScript tworzy przestrzeń w pamięci, umieszcza obiekt wewnątrz i wskazuje na nią c . Następnie, gdy wykonuje instrukcję d = c , silnik JavaScript po prostu wskazuje d to samo położenie. Nie tworzy nowej lokalizacji w pamięci. Zatem wszelkie zmiany w elementach w d są domyślnie operacją na elementach w c . Bez większego wysiłku możemy zobaczyć, dlaczego jest to problem.

Wyobraź sobie, że tworzysz aplikację React i gdzieś chcesz pokazać nazwę użytkownika jako some name , czytając ze zmiennej c . Ale gdzieś indziej wprowadziłeś błąd w swoim kodzie, manipulując obiektem d . Spowodowałoby to pojawienie się nazwy użytkownika jako new name . Gdyby c i d były prymitywami, nie mielibyśmy tego problemu. Jednak prymitywy są zbyt proste dla typów stanów, jakie musi utrzymywać typowa aplikacja React.

Oto główne powody, dla których ważne jest utrzymywanie niezmiennego stanu w aplikacji. Zachęcam do zapoznania się z kilkoma innymi uwagami, czytając tę ​​krótką sekcję z pliku README Immutable.js: przypadek niezmienności.

Po zrozumieniu, dlaczego potrzebujemy niezmienności w aplikacji React, przyjrzyjmy się teraz, jak Immer rozwiązuje ten problem za pomocą funkcji produce .

Funkcja produce Immera

Podstawowe API Immera jest bardzo małe, a główną funkcją, z którą będziesz pracować, jest funkcja produce . produce po prostu przyjmuje stan początkowy i wywołanie zwrotne, które określa, w jaki sposób stan powinien zostać zmutowany. Samo wywołanie zwrotne otrzymuje wersję roboczą (identyczną, ale wciąż kopię) kopii stanu, do którego dokonuje wszystkich zamierzonych aktualizacji. Na koniec produce nowy, niezmienny stan ze wszystkimi zastosowanymi zmianami.

Ogólny wzorzec tego rodzaju aktualizacji stanu to:

 // produce signature produce(state, callback) => nextState

Zobaczmy, jak to działa w praktyce.

 import produce from 'immer' const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], } // to add a new package const newPackage = { name: 'immer', installed: false } const nextState = produce(initState, draft => { draft.packages.push(newPackage) })

W powyższym kodzie po prostu przekazujemy stan początkowy i wywołanie zwrotne, które określa, w jaki sposób chcemy, aby zachodziły mutacje. To takie proste. Nie musimy dotykać żadnej innej części stanu. Pozostawia initState nietkniętym i strukturalnie dzieli te części stanu, których nie dotknęliśmy, między stanem początkowym i nowym. Jedną z takich części w naszym stanie jest tablica pets . nextState produce niezmiennym drzewem stanów, które zawiera wprowadzone przez nas zmiany oraz części, których nie modyfikowaliśmy.

Uzbrojeni w tę prostą, ale przydatną wiedzę, przyjrzyjmy się, jak produce może pomóc nam uprościć nasze reduktory React.

Pisanie reduktorów za pomocą Immer

Załóżmy, że mamy zdefiniowany poniżej obiekt stanu

 const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], };

Chcieliśmy dodać nowy obiekt, a w kolejnym kroku ustawiliśmy jego installed klucz na true

 const newPackage = { name: 'immer', installed: false };

Gdybyśmy zrobili to w zwykły sposób z obiektami JavaScripts i składnią rozprzestrzeniania tablicy, nasz reduktor stanów mógłby wyglądać tak, jak poniżej.

 const updateReducer = (state = initState, action) => { switch (action.type) { case 'ADD_PACKAGE': return { ...state, packages: [...state.packages, action.package], }; case 'UPDATE_INSTALLED': return { ...state, packages: state.packages.map(pack => pack.name === action.name ? { ...pack, installed: action.installed } : pack ), }; default: return state; } };

Widzimy, że jest to niepotrzebnie gadatliwe i podatne na błędy dla tego stosunkowo prostego obiektu stanu. Musimy też dotknąć każdej części państwa, co jest niepotrzebne. Zobaczmy, jak możemy to uprościć za pomocą Immera.

 const updateReducerWithProduce = (state = initState, action) => produce(state, draft => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'UPDATE_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 //curried produce signature produce(callback) => (state) => nextState

 const curriedProduce = produce((draft, action) => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'SET_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 // add a new package to the starting state const nextState = curriedProduce(initState, { type: 'ADD_PACKAGE', package: newPackage, }); // update an item in the recently produced state const nextState2 = curriedProduce(nextState, { type: 'SET_INSTALLED', name: 'immer', installed: true, });

 yarn add immer use-immer

 import React from "react"; import { useImmer } from "use-immer"; const initState = {} const [ data, updateData ] = useImmer(initState)

 // make changes to data updateData(draft => { // modify the draft as much as you want. })

 import React from "react"; import { useImmerReducer } from "use-immer"; const initState = {} const reducer = (draft, action) => { switch(action.type) { default: break; } } const [data, dataDispatch] = useImmerReducer(reducer, initState);