<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>redux &#8211; Strona Szoguna</title>
	<atom:link href="https://szogun1987.pl/show/tag/redux/feed/" rel="self" type="application/rss+xml" />
	<link>https://szogun1987.pl</link>
	<description>Jeszcze wstawię tutaj jakiś głęboki cytat</description>
	<lastBuildDate>Mon, 29 Jul 2019 17:58:27 +0000</lastBuildDate>
	<language>pl-PL</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.3.2</generator>
	<item>
		<title>Immutable Map &#8211; modyfikowanie wielu pól</title>
		<link>https://szogun1987.pl/show/immutable-map-modyfikowania-wielu-pol/529/</link>
					<comments>https://szogun1987.pl/show/immutable-map-modyfikowania-wielu-pol/529/#respond</comments>
		
		<dc:creator><![CDATA[szogun1987]]></dc:creator>
		<pubDate>Mon, 29 Jul 2019 17:46:23 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Browser side]]></category>
		<category><![CDATA[immutable]]></category>
		<category><![CDATA[react-js]]></category>
		<category><![CDATA[redux]]></category>
		<guid isPermaLink="false">https://szogun1987.pl/?p=529</guid>

					<description><![CDATA[Klasa Map z pakietu immutable jest obecnie popularnie wybierana jako kontener dla globalnego stanu w aplikacjach wykorzystujących redux. Zauważyłem też że powszechną, ale błędną, praktyką jest modyfikowanie wielu pól przy pomocy łańcucha poleceń set. const newState = oldState .set('field1', 'value1') .set('field2', 'value2') .set('field3', 'value3'); Podejście to sprawia, że za każdym wywołaniem metody set tworzona jest &#8230; <p class="link-more"><a href="https://szogun1987.pl/show/immutable-map-modyfikowania-wielu-pol/529/" class="more-link">Czytaj dalej<span class="screen-reader-text"> Immutable Map &#8211; modyfikowanie wielu pól</span></a></p>]]></description>
										<content:encoded><![CDATA[
<p>Klasa Map z pakietu <a href="https://www.npmjs.com/package/immutable">immutable</a> jest obecnie popularnie wybierana jako kontener  dla globalnego stanu w aplikacjach wykorzystujących <a href="https://www.npmjs.com/package/redux">redux</a>. </p>



<p>Zauważyłem też że powszechną, ale błędną, praktyką jest modyfikowanie wielu pól przy pomocy łańcucha poleceń set.</p>



<pre class="prettyprint">const newState = oldState
    .set('field1', 'value1')
    .set('field2', 'value2')
    .set('field3', 'value3');
</pre>



<span id="more-529"></span>



<p>Podejście to sprawia, że za każdym wywołaniem metody set tworzona jest nowa, na szczęście płytka, kopia mapy ze zmienionym jednym polem.</p>



<p>Poprawę wydajności można uzyskać wykorzystując metodę <a href="https://immutable-js.github.io/immutable-js/docs/#/Map/withMutations">withMutations</a>.</p>



<pre class="prettyprint">const newState = oldState.withMutations(map =&gt; {
    map
    	.set('field1', 'value1')
        .set('field2', 'value2')
        .set('field3', 'value3');
    });
</pre>



<h3 class="wp-block-heading">Mierz wyniki</h3>



<p>Użycie tej metody nie gwarantuje jednak poprawy wydajności. Poniższy test zawiera 2 skraje przypadki użycia obu podejść:</p>



<pre class="prettyprint">const Map = require('immutable').Map;
const {
  performance
} = require('perf_hooks');

function test(tested) {
	const before = performance.now();
	for (let i = 0; i < 1000; i++) {
		tested();
	}
	return performance.now() - before;
}

let map = new Map();
const mapSet1 = test(function() {
	map.set("field1", "value");
});

map = new Map();
const mapWithMutations1 = test(function() {
	map.withMutations(map2 => {
		map2.set("field1", "value");
	})
});

map = new Map();
const mapSet2 = test(function() {
	map
		.set("field1", "value1")
		.set("field2", "value2")
		.set("field3", "value3")
		.set("field4", "value4")
		.set("field5", "value5")
		.set("field6", "value6")
		.set("field7", "value7")
		.set("field8", "value8")
		.set("field9", "value9");
});

map = new Map();
const mapWithMutations2 = test(function() {
	map.withMutations(map2 => {
		map2.set("field1", "value1");
		map2.set("field2", "value2");
		map2.set("field3", "value3");
		map2.set("field4", "value4");
		map2.set("field5", "value5");
		map2.set("field6", "value6");
		map2.set("field7", "value7");
		map2.set("field8", "value8");
		map2.set("field9", "value9");
	})
});

console.log({
	mapSet1,
	mapWithMutations1,
	mapSet2,
	mapWithMutations2
});
</pre>



<p>Na mojej maszynie uzyskałem następujący wynik:</p>



<pre class="prettyprint">{
  mapSet1: 0.9362990260124207,
  mapWithMutations1: 1.4729009866714478,
  mapSet2: 23.789600014686584,
  mapWithMutations2: 13.4621000289917
}
</pre>
]]></content:encoded>
					
					<wfw:commentRss>https://szogun1987.pl/show/immutable-map-modyfikowania-wielu-pol/529/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
