This repository has been archived by the owner on Feb 12, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
1445 lines (1298 loc) · 83.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./katex.css" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<title>Learning Redux</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="assets/css/pilcrow.css" />
<link type="text/css" rel="stylesheet" href="assets/css/hljs-github.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-dark.min.css"
integrity="sha512-Njdz7T/p6Ud1FiTMqH87bzDxaZBsVNebOWmacBjMdgWyeIhUSFU4V52oGwo3sT+ud+lyIE98sS291/zxBfozKw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
//Get the button:
mybutton = document.getElementById( "scrollBtn" );
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
};
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
};
window.addEventListener( 'DOMContentLoaded', ( event ) => {
console.log( 'DOM fully loaded and parsed' );
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if ( c > 0 ) {
window.requestAnimationFrame( scrollToTop );
window.scrollTo( 0, c - c / 8 );
}
};
scrollToTop();
} );
</script>
<script async defer src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script async defer type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/download-button/prism-download-button.min.js"
integrity="sha512-rGJwSZEEYPBQjqYxrdg6Ug/6i763XQogKx+N/GF1rCGvfmhIlIUFxCjc4FmEdCu5dvovqxHsoe3IPMKP+KlgNQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript"
src="https://platform-api.sharethis.com/js/sharethis.js#property=60c2b3f20cb9f200113df1c3&product=sticky-share-buttons"
async="async"></script>
<style>
.ignore-css {
all: unset;
}
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #f10e0e !important;
}
a:visited {
color: #437a16 !important;
}
a:focus {
border-bottom: 1px solid;
background: #4206f6 !important;
}
a:hover {
border-bottom: 1px solid;
background: #07edf9 !important;
}
a:active {
background: #265301;
color: #cdfeaa;
}
iframe {
height: 800px !important;
width: 800px !important;
}
h1 {
width:70%!important;
padding: 10px;
text-align: center;
background: rgb(17, 132, 220);
color: black;
font-size: 20px;
}
#scrollBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px
}
#scrollBtn:hover {
background-color: #555
}
</style>
</head>
<body for="html-export">
<div class="sharethis-sticky-share-buttons"></div>
<a class="github-corner" href="https://github.com/bgoonz/Learning-Redux" aria-label="View source on Github">
<svg aria-hidden="true" width="80" height="80" viewbox="0 0 250 250"
style="z-index: 100000; fill:#194ccdaf; color:#fff; position: fixed; top: 20px; border: 0; left: 20px; transform: scale(-1.5, 1.5);">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">
</path>
<path class="octo-arm"
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;">
</path>
<path class="octo-body"
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor">
</path>
</svg>
</a>
<br>
<br />
<br />
<!-- Badge Code - Do Not Change The Code -->
<a class="hitCounter" href="https://visitorshitcounter.com/" target="_blank" title="Hit counter"
data-name="86b8037da0e55e778419cb9848fcacc9|5|page|200|rgb(0, 0, 0);|#ffffff|small|s-hit">Hit Counter</a>
<script>
document.write( "<script type='text/javascript' src='https://visitorshitcounter.com/js/hitCounter.js?v=" + Date
.now() + "'><\/script>" );
</script>
<!-- Badge Code End Here -->
<center>
<h1>Bgoonz Learning Redux Repo:</h1>
<br />
<br />
<div>
<button type="submit"
style=" position: fixed; bottom: 80px; right: 0px; z-index: 99; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px; font-size: 18px "
id=" scrollBtn" title="Go to top" onclick="topFunction()">Back To
Top</button>
</div>
<br />
<h2>Repl For The Repo Behind This Site</h2>
<br />
<iframe loading="lazy" style="border:black 4px;" src="https://replit.com/@bgoonz/Learning-Redux?lite=true&"></iframe>
<br />
<br />
<br />
<a style="font-weight: bolder; font-size: larger" href="./directory.html">Navigation</a>
<br />
<br />
<br />
<br />
<a style="font-weight: bolder; font-size: larger" href="./DOCS/official/directory.html">Docs</a>
<br />
<br />
<br />
<iframe loading="lazy" src="https://codesandbox.io/embed/hungry-lichterman-urxh4?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="hungry-lichterman-urxh4"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<br />
<br />
</center>
<div class="mume markdown-preview ">
<h1 class="mume-header"
id="redux-libraries-learning-material-awesomehttpscdnrawgitcomsindresorhusawesomed7305f38d29fed78fa85652e3a63e154dd8e8829mediabadgesvghttpsgithubcomsindresorhusawesome">
Redux Libraries & Learning Material <a href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome"></a></h1>
<p><a href="http://redux.js.org/"><img src="https://rawgit.com/brillout/awesome-redux/master/redux-logo.svg"
align="right" width="110"></a></p>
<blockquote>
<p>Redux is a state container for JavaScript apps.</p>
</blockquote>
<ul>
<li>Official website: <a href="https://devarchy.com/redux"><code class="language-js">devarchy.com/redux</code></a>
</li>
<li>Use devarchy to add a library to the catalog</li>
</ul>
<br>
<h4 class="mume-header" id="contents">Contents</h4>
<ul>
<li><a href="#code-architecture">Code Architecture</a></li>
<li><a href="#utilities">Utilities</a></li>
<li><a href="#code-style">Code Style</a></li>
<li><a href="#dev-tools--inspection-tools">Dev tools / Inspection tools</a></li>
<li><a href="#react-integration">React Integration</a></li>
<li><a href="#other-integrations">Other Integrations</a></li>
<li><a href="#boilerplate">Boilerplate</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
<li><a href="#learning-material">Learning Material</a></li>
<li><a href="#community">Community</a></li>
</ul>
<br>
<h2 class="mume-header" id="code-architecture">Code Architecture</h2>
<blockquote>
<p><em>Aims to improve the overall structure of the source code. Makes reasoning about the code easier.</em></p>
</blockquote>
<ul>
<li><a href="https://github.com/ddsol/redux-schema">redux-schema</a> - Automatic actions, reducers and validation
for Redux.</li>
<li><a href="https://github.com/gcanti/redux-tcomb">redux-tcomb</a> - Immutable and type-checked state and actions
for Redux.</li>
<li><a href="https://github.com/cerebral/redux-action-tree">redux-action-tree</a> - The Cerebral signals running
with Redux.</li>
<li><a href="https://github.com/salsita/redux-elm">redux-elm</a> - The Elm Architecture in JavaScript.</li>
</ul>
<h2 class="mume-header" id="utilities">Utilities</h2>
<ul>
<li><a href="https://github.com/tommikaikkonen/redux-orm">redux-orm</a> - Small, simple and immutable ORM to
manage relational data in your Redux store.</li>
<li><a href="https://github.com/agraboso/redux-api-middleware">redux-api-middleware</a> - Redux middleware for
calling an API.</li>
<li><a href="https://github.com/omnidan/redux-ignore">redux-ignore</a> - Higher-order reducer to ignore Redux
actions.</li>
<li><a href="https://github.com/calvinfroedge/redux-modifiers">redux-modifiers</a> - Collection of generic
functions for writing Redux reducers to operate on various data structures.</li>
<li><a href="https://github.com/slorber/rereduce">rereduce</a> - Reducer library for Redux.</li>
<li><a href="https://github.com/treasure-data/redux-search">redux-search</a> - Redux bindings for client-side
search.</li>
<li><a href="https://github.com/evgenyrodionov/redux-logger">redux-logger</a> - Logger middleware for Redux.</li>
<li><a href="https://github.com/gajus/redux-immutable">redux-immutable</a> - Redux-immutable is used to create an
equivalent function of Redux combineReducers that works with Immutable.js state.</li>
<li><a href="https://github.com/reactjs/reselect">reselect</a> - Selector library for Redux.</li>
<li><a href="https://github.com/idolize/redux-requests">redux-requests</a> - Manages in-flight requests with a
Redux reducer to avoid issuing duplicate requests.</li>
<li><a href="https://github.com/omnidan/redux-undo">redux-undo</a> - Higher order reducer to add undo/redo
functionality to Redux state containers.</li>
<li><a href="https://github.com/dtschust/redux-bug-reporter">redux-bug-reporter</a> - Bug reporter and bug
playback tool for Redux.</li>
<li><a href="https://github.com/acdlite/redux-transducers">redux-transducers</a> - Transducer utilities for Redux.
</li>
</ul>
<h3 class="mume-header" id="store-persistence">Store Persistence</h3>
<ul>
<li><a href="https://github.com/michaelcontento/redux-storage">redux-storage</a> - Persistence layer for Redux
with flexible backends.</li>
<li><a href="https://github.com/rt2zz/redux-persist">redux-persist</a> - Persist and rehydrate a Redux store.</li>
</ul>
<h3 class="mume-header" id="side-effects">Side Effects</h3>
<blockquote>
<p><em>Side Effects / Asynchronous Actions</em></p>
</blockquote>
<ul>
<li><a href="https://github.com/yelouafi/redux-saga">redux-saga</a> - Alternative side effect model for Redux
apps.</li>
</ul>
<li><a href="https://github.com/pburtchaell/redux-promise-middleware">redux-promise-middleware</a> - Redux
middleware for resolving and rejecting promises with conditional optimistic updates.</li>
<li><a href="https://github.com/redux-effects/redux-effects">redux-effects</a> - You write pure functions,
redux-effects handles the rest.</li>
<li><a href="https://github.com/gaearon/redux-thunk">redux-thunk</a> - Thunk middleware for Redux.</li>
<li><a href="https://github.com/makeomatic/redux-connect">redux-connect</a> - Provides decorator for resolving
async props in react-router, extremely useful for handling server-side rendering in React.</li>
<li><a href="https://github.com/redux-loop/redux-loop">redux-loop</a> - Port of elm-effects and the Elm
Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your
reducers.</li>
<li><a href="https://github.com/salsita/redux-side-effects">redux-side-effects</a> - Redux toolset for keeping all
the side effects inside your reducers while maintaining their purity.</li>
<li><a href="https://github.com/jeffbski/redux-logic">redux-logic</a> - Redux middleware for organizing business
logic and action side effects.</li>
<li><a href="https://github.com/redux-observable/redux-observable">redux-observable</a> - RxJS middleware for
action side effects in Redux using "Epics".</li>
<li><a href="https://github.com/clarus/redux-ship">redux-ship</a> - Composable, testable and typable side effects.
</li>
</ul>
<h2 class="mume-header" id="code-style">Code Style</h2>
<blockquote>
<p><em>Aims to make parts of the source code easier to read/write.</em></p>
</blockquote>
<ul>
<li><a href="https://github.com/pauldijou/redux-act">redux-act</a> - Opinionated lib to create actions and
reducers for Redux.</li>
<li><a href="https://github.com/Versent/redux-crud">redux-crud</a> - Set of standard actions and reducers for
Redux CRUD Applications.</li>
</ul>
<h2 class="mume-header" id="dev-tools-inspection-tools">Dev tools / Inspection tools</h2>
<ul>
<li><a href="https://github.com/alexkuz/redux-devtools-inspector">redux-devtools-inspector</a> - Another Redux
DevTools Monitor.</li>
<li><a href="https://github.com/fcomb/redux-diff-logger">redux-diff-logger</a> - Diff logger between states for
Redux.</li>
<li><a href="https://github.com/romseguy/redux-devtools-chart-monitor">redux-devtools-chart-monitor</a> - Chart
monitor for Redux DevTools.</li>
<li><a href="https://github.com/gaearon/redux-devtools">redux-devtools</a> - DevTools for Redux with hot
reloading, action replay, and customizable UI.</li>
<li><a href="https://github.com/YoruNoHikage/redux-devtools-dispatch">redux-devtools-dispatch</a> - Dispatch your
actions manually to test if your app Reacts well.</li>
<li><a href="https://github.com/gaearon/redux-devtools-dock-monitor">redux-devtools-dock-monitor</a> - Resizable
and movable dock for Redux DevTools monitors.</li>
<li><a
href="https://github.com/bvaughn/redux-devtools-filterable-log-monitor">redux-devtools-filterable-log-monitor</a>
- Filterable tree view monitor for Redux DevTools.</li>
<li><a href="https://github.com/gaearon/redux-devtools-log-monitor">redux-devtools-log-monitor</a> - The default
monitor for Redux DevTools with a tree view.</li>
<li><a href="https://github.com/zalmoxisus/remote-redux-devtools">remote-redux-devtools</a> - Redux DevTools
remotely.</li>
</ul>
<h2 class="mume-header" id="react-integration">React Integration</h2>
<ul>
<li><a href="https://github.com/conorhastings/redux-test-recorder">redux-test-recorder</a> - Redux middleware to
automatically generate tests for reducers through ui interaction.</li>
<li><a href="https://github.com/reactjs/react-redux">react-redux</a> - Official React bindings for Redux.</li>
<li><a href="https://github.com/keystonejs/react-easy-universal">react-easy-universal</a> - Universal Routing
& Rendering with React & Redux was too hard. Now it's easy.</li>
<li><a href="https://github.com/erikras/redux-form-material-ui">redux-form-material-ui</a> - Set of wrapper
components to facilitate using Material UI with Redux Form.</li>
</ul>
<h3 class="mume-header" id="routing">Routing</h3>
<ul>
<li><a href="https://github.com/Rezonans/redux-async-connect">redux-async-connect</a> - It allows you to request
async data, store them in Redux state and connect them to your React component.</li>
<li><a href="https://github.com/Agamennon/redux-tiny-router">redux-tiny-router</a> - Router made for Redux and
made for universal apps. Stop using the router as a controller, it's just state.</li>
<li><a href="https://github.com/acdlite/redux-router">redux-router</a> - Redux bindings for React Router –
keep your router state inside your Redux store.</li>
<li><a href="https://github.com/reactjs/react-router-redux">react-router-redux</a> - Ruthlessly simple bindings to
keep react-router and Redux in sync.</li>
<li><a href="https://github.com/raisemarketplace/ground-control">ground-control</a> - Scalable reducer management
& powerful data fetching for React Router & Redux.</li>
</ul>
<h3 class="mume-header" id="forms">Forms</h3>
<ul>
<li><a href="https://github.com/erikras/redux-form">redux-form</a> - Higher Order Component using react-redux to
keep form state in a Redux store.</li>
<li><a href="https://github.com/davidkpiano/react-redux-form">react-redux-form</a> - Create forms easily in React
with Redux.</li>
</ul>
<h3 class="mume-header" id="component-state">Component State</h3>
<ul>
<li><a href="https://github.com/threepointone/redux-react-local">redux-react-local</a> - Local component state via
Redux.</li>
<li><a href="https://github.com/tonyhb/redux-ui">redux-ui</a> - Easy UI state management for React Redux.</li>
</ul>
<h2 class="mume-header" id="other-integrations">Other Integrations</h2>
<h3 class="mume-header" id="flux">Flux</h3>
<ul>
<li><a href="https://github.com/acdlite/redux-actions">redux-actions</a> - Flux Standard Action utilities for
Redux.</li>
<li><a href="https://github.com/acdlite/redux-promise">redux-promise</a> - FSA-compliant promise middleware for
Redux.</li>
</ul>
<h3 class="mume-header" id="backbone">Backbone</h3>
<ul>
<li><a href="https://github.com/redbooth/backbone-redux">backbone-redux</a> - Easy way to keep your backbone
collections and Redux store in sync.</li>
</ul>
<h3 class="mume-header" id="falcor">Falcor</h3>
<ul>
<li><a href="https://github.com/ekosz/redux-falcor">redux-falcor</a> - Connect your Redux front-end to your falcor
back-end.</li>
</ul>
<h3 class="mume-header" id="rxjs">RxJS</h3>
<ul>
<li><a href="https://github.com/redux-observable/redux-observable">redux-observable</a> - RxJS middleware for
action side effects in Redux using "Epics".</li>
<li><a href="https://github.com/jas-chen/rx-redux">rx-redux</a> - Reimplementation of Redux using RxJS.</li>
<li><a href="https://github.com/acdlite/redux-rx">redux-rx</a> - RxJS utilities for Redux.</li>
<li><a href="https://github.com/shiftyp/redurx">redurx</a> - Redux'ish Functional State Management using
RxJS.</li>
</ul>
<h3 class="mume-header" id="electron">Electron</h3>
<ul>
<li><a href="https://github.com/samiskin/redux-electron-store">redux-electron-store</a> - Redux store enhancer
that allows automatic synchronization between electron processes.</li>
</ul>
<h3 class="mume-header" id="deku">Deku</h3>
<ul>
<li><a href="https://github.com/troch/deku-redux">deku-redux</a> - Bindings for Redux in deku < v2.</li>
</ul>
<h3 class="mume-header" id="other">Other</h3>
<ul>
<li><a href="https://github.com/netguru/redux-rollbar-middleware">redux-rollbar-middleware</a> - Redux middleware
that wraps exceptions in actions and sends them to Rollbar with current state.</li>
<li><a href="https://github.com/outlandishideas/kasia">kasia</a> - React Redux toolset for the WordPress API.</li>
</ul>
<h2 class="mume-header" id="boilerplate">Boilerplate</h2>
<p><em>Boilerplates / Scaffolds / Starter Kits / Generators / Stack Ensembles</em></p>
<ul>
<li><a href="https://github.com/SpencerCDixon/redux-cli">redux-cli</a> - Opinionated CLI for building Redux/React
apps quicker.</li>
<li><a href="https://github.com/reactuate/reactuate">reactuate</a> - React/Redux stack (not a boilerplate kit).
</li>
<li><a
href="https://github.com/jhen0409/react-chrome-extension-boilerplate">react-chrome-extension-boilerplate</a> -
Boilerplate for Chrome Extension React.js project.</li>
<li><a href="https://github.com/bdefore/universal-redux">universal-redux</a> - Npm package that lets you jump
right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack
configurations if you want to.</li>
<li><a href="https://github.com/pauldotknopf/react-aspnet-boilerplate">generator-react-aspnet-boilerplate</a> -
Starting point for building isomorphic React applications with <a href="http://ASP.NET">ASP.NET</a> Core 1,
leveraging existing techniques.</li>
<li><a href="https://github.com/banderson/generator-redux">generator-redux</a> - CLI tools for Redux: next-gen
functional Flux/React with devtools.</li>
<li><a href="https://github.com/stylesuxx/generator-react-webpack-redux">generator-react-webpack-redux</a> - React
Webpack Generator including Redux support.</li>
<li><a href="https://github.com/matthewmueller/socrates">socrates</a> - Small (8kb), batteries-included Redux
store to reduce boilerplate and promote good habits.</li>
</ul>
<h2 class="mume-header" id="miscellaneous">Miscellaneous</h2>
<ul>
<li><a href="https://github.com/jas-chen/redux-core">redux-core</a> - Minimal Redux.</li>
</ul>
<h2 class="mume-header" id="learning-material">Learning Material</h2>
<ul>
<li>
<p><strong>Redux's concepts</strong></p>
<p><a href="http://redux.js.org/">Redux official documentation</a> does a great job at explaining Redux's
core principles.</p>
</li>
<li>
<p><strong>Why immutable data structures</strong></p>
<p>The <a href="https://facebook.github.io/react/docs/advanced-performance.html">guide on performance</a> of
React's official documentation explains well what immutable data structures are and why they play an
important role.</p>
</li>
<li>
<p><strong>Side Effects</strong></p>
<p><a href="https://github.com/redux-loop/redux-loop">Redux Loop's readme</a> gives a good insight on Side
Effects in the context of Redux.</p>
</li>
</ul>
<p>Reading the aforementioned material will get you a good start for writing apps with Redux.<br>
If you are curious for more, check out following resources.</p>
<ul>
<li>
<p><strong>Functional Programming - Basics</strong></p>
<p>This <a href="http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/">post</a> goes over basic
concepts of functional programming while building a YouTube instant search demo app.</p>
</li>
<li>
<p><strong>Reactive Programming</strong></p>
<p>This <a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">introduction to Reactive Programming</a>
explains Reactive Programming with clarity.</p>
</li>
<li>
<p><strong>Functional Programming - Going beyond</strong></p>
<p>Well written <a
href="https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504">article</a>
that talks about interesting computer science concepts implemented in functional languages and how these apply
to JavaScript.</p>
</li>
<li>
<p><strong>Monads</strong></p>
<p>Curious about monads? Wikipedia gives a good <a
href="https://en.wikipedia.org/wiki/Monad_(functional_programming)">overview on monads</a> and <a
href="http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html">this article</a>
explains monads in more details with graphics and simple examples.</p>
</li>
</ul>
<h2 class="mume-header" id="community">Community</h2>
<ul>
<li><a href="https://www.reddit.com/r/reduxjs/">Reddit</a></li>
<li><a href="http://stackoverflow.com/questions/tagged/redux">Stack Overflow</a></li>
<li><a href="https://discord.gg/0ZcbPKXt5bZ6au5t">Discord</a></li>
<li><a href="http://slack.redux.io/">Slack</a></li>
<li><a href="https://gitter.im/reactjs/redux">Gitter</a></li>
<li><a href="https://webchat.freenode.net/"><code class="language-js">#rackt</code> on freenode</a></li>
</ul>
<br />
<iframe loading="lazy" src="https://codesandbox.io/embed/crazy-smoke-17b98?fontsize=14&hidenavigation=1&theme=dark" style="
width: 90%;
height: 500px;
border: 0;
border-radius: 4px;
overflow: hidden;
" title="crazy-smoke-17b98"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<br />
<br />
<iframe loading="lazy" src="https://codesandbox.io/embed/react-redux-example-forked-xrlj1?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="React-Redux example (forked)"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<br />
<br />
<iframe
src="https://codesandbox.io/embed/react-redux-tutorial-for-beginners-learning-redux-in-2018-forked-3p58w?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="React Redux Tutorial for Beginners, learning Redux in 2018 (forked)"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<br />
<br />
<iframe loading="lazy" src="https://codesandbox.io/embed/learn-redux-forked-q10lp?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="learn-redux (forked)"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<br />
<br />
<iframe loading="lazy" src="https://codesandbox.io/embed/redux-in-5-minutes-forked-qd377?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="Redux in 5 minutes (forked)"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<br />
<br />
<h1 class="mume-header" id="getting-started-with-react-redux-react-redux">Getting Started with React Redux | React
Redux</h1>
<blockquote>
<p>Introduction > Getting Started: First steps with React Redux</p>
</blockquote>
<p><a href="https://github.com/reduxjs/react-redux">React Redux</a> is the official <a
href="https://reactjs.org/">React</a> UI bindings layer for <a href="https://redux.js.org/">Redux</a>. It lets
your React components read data from a Redux store, and dispatch actions to the store to update state.</p>
<h2 class="mume-header" id="installationinstallation-direct-link-to-heading">Installation<a href="#installation"
title="Direct link to heading">#</a></h2>
<p>React Redux 7.1+ requires <strong>React 16.8.3 or later</strong>, in order to make use of React Hooks.</p>
<h3 class="mume-header" id="using-create-react-appusing-create-react-app-direct-link-to-heading">Using Create React
App<a href="#using-create-react-app" title="Direct link to heading">#</a></h3>
<p>The recommended way to start new apps with React and Redux is by using the <a
href="https://github.com/reduxjs/cra-template-redux">official Redux+JS template</a> or <a
href="https://github.com/reduxjs/cra-template-redux-typescript">Redux+TS template</a> for <a
href="https://github.com/facebook/create-react-app">Create React App</a>, which takes advantage of <strong><a
href="https://redux-toolkit.js.org/">Redux Toolkit</a></strong> and React Redux's integration with React
components.</p>
<h3 class="mume-header" id="an-existing-react-appan-existing-react-app-direct-link-to-heading">An Existing React
App<a href="#an-existing-react-app" title="Direct link to heading">#</a></h3>
<p>To use React Redux with your React app, install it as a dependency:</p>
<p>You'll also need to <a href="https://redux.js.org/introduction/installation">install Redux</a> and <a
href="https://redux.js.org/recipes/configuring-your-store/">set up a Redux store</a> in your app.</p>
<p>If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped, but included as
a dependency of the <code class="language-js">react-redux</code> package, so they should be installed
automatically. If you still need
to install them manually, run:</p>
<h2 class="mume-header" id="api-overviewapi-overview-direct-link-to-heading">API Overview<a href="#api-overview"
title="Direct link to heading">#</a></h2>
<h3 class="mume-header" id="providerprovider-direct-link-to-heading"><code class="language-js">Provider</code><a
href="#provider" title="Direct link to heading">#</a></h3>
<p>React Redux includes a <code class="language-js"><Provider /></code> component, which makes the Redux store
available to the
rest of your app:</p>
<h3 class="mume-header" id="hookshooks-direct-link-to-heading">Hooks<a href="#hooks"
title="Direct link to heading">#</a></h3>
<p>React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux
store.</p>
<p><code class="language-js">useSelector</code> reads a value from the store state and subscribes to updates, while
<code class="language-js">useDispatch</code> returns the store's <code class="language-js">dispatch</code>
method to let you dispatch actions.
</p>
<h2 class="mume-header" id="learning-react-reduxlearning-react-redux-direct-link-to-heading">Learning React Redux<a
href="#learning-react-redux" title="Direct link to heading">#</a></h2>
<h3 class="mume-header" id="learn-modern-redux-livestreamlearn-modern-redux-livestream-direct-link-to-heading">Learn
Modern Redux Livestream<a href="#learn-modern-redux-livestream" title="Direct link to heading">#</a></h3>
<p>Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using
Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks
with Typescript, as well as the new RTK Query data fetching APIs.</p>
<p>See <a href="https://www.learnwithjason.dev/let-s-learn-modern-redux">the "Learn Modern Redux" show
notes page</a> for a transcript and links to the example app source.</p>
<h2 class="mume-header" id="help-and-discussionhelp-and-discussion-direct-link-to-heading">Help and Discussion<a
href="#help-and-discussion" title="Direct link to heading">#</a></h2>
<p>The <strong><a href="https://discord.gg/0ZcbPKXt5bZ6au5t">#redux channel</a></strong> of the <strong><a
href="http://www.reactiflux.com/">Reactiflux Discord community</a></strong> is our official resource for all
questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn -
come join us!</p>
<p>You can also ask questions on <a href="https://stackoverflow.com/">Stack Overflow</a> using the <strong><a
href="https://stackoverflow.com/questions/tagged/redux">#redux tag</a></strong>.</p>
<h2 class="mume-header" id="introductionintroduction-direct-link-to-heading"><a href="#introduction"
title="Direct link to heading">Introduction</a></h2>
<p>Welcome to the Redux Essentials tutorial! <strong>This tutorial will introduce you to Redux and teach you how to
use it the right way, using our latest recommended tools and best practices</strong>. By the time you finish,
you should be able to start building your own Redux applications using the tools and patterns you've learned
here.</p>
<p>In Part 1 of this tutorial, we'll cover the key concepts and terms you need to know to use Redux, and in <a
href="chrome-extension://cjedbglnccaioiolemnfhjncicchinao/tutorials/essentials/part-2-app-structure">Part 2:
Redux App Structure</a> we'll examine a basic React + Redux app to see how the pieces fit together.</p>
<p>Starting in <a
href="chrome-extension://cjedbglnccaioiolemnfhjncicchinao/tutorials/essentials/part-3-data-flow">Part 3: Basic
Redux Data Flow</a>, we'll use that knowledge to build a small social media feed app with some real-world
features, see how those pieces actually work in practice, and talk about some important patterns and guidelines
for using Redux.</p>
<h3 class="mume-header" id="how-to-read-this-tutorialhow-to-read-this-tutorial-direct-link-to-heading"><a
href="#how-to-read-this-tutorial" title="Direct link to heading">How to Read This Tutorial</a></h3>
<p>This page will focus on showing you <em>how</em> to use Redux the right way, and explain just enough of the
concepts so that you can understand how to build Redux apps correctly.</p>
<p>We've tried to keep these explanations beginner-friendly, but we do need to make some assumptions about what
you know already:</p>
<p><strong>If you're not already comfortable with those topics, we encourage you to take some time to become
comfortable with them first, and then come back to learn about Redux</strong>. We'll be here when
you're ready!</p>
<p>You should make sure that you have the React and Redux DevTools extensions installed in your browser:</p>
<ul>
<li>React DevTools Extension:
<ul>
<li><a
href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React
DevTools Extension for Chrome</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">React DevTools Extension for
Firefox</a></li>
</ul>
</li>
<li>Redux DevTools Extension:
<ul>
<li><a
href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en">Redux
DevTools Extension for Chrome</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/">Redux DevTools Extension for
Firefox</a></li>
</ul>
</li>
</ul>
<h2 class="mume-header" id="what-is-reduxwhat-is-redux-direct-link-to-heading"><a href="#what-is-redux"
title="Direct link to heading">What is Redux?</a></h2>
<p>It helps to understand what this "Redux" thing is in the first place. What does it do? What problems
does it help me solve? Why would I want to use it?</p>
<p><strong>Redux is a pattern and library for managing and updating application state, using events called
"actions".</strong> It serves as a centralized store for state that needs to be used across your
entire application, with rules ensuring that the state can only be updated in a predictable fashion.</p>
<h3 class="mume-header" id="why-should-i-use-reduxwhy-should-i-use-redux-direct-link-to-heading">Why Should I Use
Redux?<a href="#why-should-i-use-redux" title="Direct link to heading">#</a></h3>
<p>Redux helps you manage "global" state - state that is needed across many parts of your application.</p>
<p><strong>The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state
in your application is being updated, and how your application logic will behave when those changes
occur</strong>. Redux guides you towards writing code that is predictable and testable, which helps give you
confidence that your application will work as expected.</p>
<h3 class="mume-header" id="when-should-i-use-reduxwhen-should-i-use-redux-direct-link-to-heading">When Should I Use
Redux?<a href="#when-should-i-use-redux" title="Direct link to heading">#</a></h3>
<p>Redux helps you deal with shared state management, but like any tool, it has tradeoffs. There are more concepts
to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain
restrictions. It's a trade-off between short term and long term productivity.</p>
<p>Redux is more useful when:</p>
<ul>
<li>You have large amounts of application state that are needed in many places in the app</li>
<li>The app state is updated frequently over time</li>
<li>The logic to update that state may be complex</li>
<li>The app has a medium or large-sized codebase, and might be worked on by many people</li>
</ul>
<p><strong>Not all apps need Redux. Take some time to think about the kind of app you're building, and decide
what tools would be best to help solve the problems you're working on.</strong></p>
<h3 class="mume-header" id="redux-libraries-and-toolsredux-libraries-and-tools-direct-link-to-heading">Redux
Libraries and Tools<a href="#redux-libraries-and-tools" title="Direct link to heading">#</a></h3>
<p>Redux is a small standalone JS library. However, it is commonly used with several other packages:</p>
<h4 class="mume-header" id="react-reduxreact-redux-direct-link-to-heading">React-Redux<a href="#react-redux"
title="Direct link to heading">#</a></h4>
<p>Redux can integrate with any UI framework, and is most frequently used with React. <a
href="https://react-redux.js.org/"><strong>React-Redux</strong></a> is our official package that lets your React
components interact with a Redux store by reading pieces of state and dispatching actions to update the store.</p>
<h4 class="mume-header" id="redux-toolkitredux-toolkit-direct-link-to-heading">Redux Toolkit<a href="#redux-toolkit"
title="Direct link to heading">#</a></h4>
<p><a href="https://redux-toolkit.js.org/"><strong>Redux Toolkit</strong></a> is our recommended approach for
writing Redux logic. It contains packages and functions that we think are essential for building a Redux app.
Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and
makes it easier to write Redux applications.</p>
<h4 class="mume-header" id="redux-devtools-extensionredux-devtools-extension-direct-link-to-heading">Redux DevTools
Extension<a href="#redux-devtools-extension" title="Direct link to heading">#</a></h4>
<p>The <a href="https://github.com/zalmoxisus/redux-devtools-extension"><strong>Redux DevTools
Extension</strong></a> shows a history of the changes to the state in your Redux store over time. This allows
you to debug your applications effectively, including using powerful techniques like "time-travel
debugging".</p>
<h2 class="mume-header" id="redux-terms-and-conceptsredux-terms-and-concepts-direct-link-to-heading">Redux Terms and
Concepts<a href="#redux-terms-and-concepts" title="Direct link to heading">#</a></h2>
<p>Before we dive into some actual code, let's talk about some of the terms and concepts you'll need to
know to use Redux.</p>
<h3 class="mume-header" id="state-managementstate-management-direct-link-to-heading">State Management<a
href="#state-management" title="Direct link to heading">#</a></h3>
<p>Let's start by looking at a small React counter component. It tracks a number in component state, and
increments the number when a button is clicked:</p>
<p>It is a self-contained app with the following parts:</p>
<ul>
<li>The <strong>state</strong>, the source of truth that drives our app;</li>
<li>The <strong>view</strong>, a declarative description of the UI based on the current state</li>
<li>The <strong>actions</strong>, the events that occur in the app based on user input, and trigger updates in the
state</li>
</ul>
<p>This is a small example of <strong>"one-way data flow"</strong>:</p>
<ul>
<li>State describes the condition of the app at a specific point in time</li>
<li>The UI is rendered based on that state</li>
<li>When something happens (such as a user clicking a button), the state is updated based on what occurred</li>
<li>The UI re-renders based on the new state</li>
</ul>
<p><img src="https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif"
alt="One-way data flow"></p>
<p>However, the simplicity can break down when we have <strong>multiple components that need to share and use the
same state</strong>, especially if those components are located in different parts of the application. Sometimes
this can be solved by <a href="https://reactjs.org/docs/lifting-state-up.html">"lifting state up"</a> to
parent components, but that doesn't always help.</p>
<p>One way to solve this is to extract the shared state from the components, and put it into a centralized location
outside the component tree. With this, our component tree becomes a big "view", and any component can
access the state or trigger actions, no matter where they are in the tree!</p>
<p>By defining and separating the concepts involved in state management and enforcing rules that maintain
independence between views and states, we give our code more structure and maintainability.</p>
<p>This is the basic idea behind Redux: a single centralized place to contain the global state in your application,
and specific patterns to follow when updating that state to make the code predictable.</p>
<h3 class="mume-header" id="immutabilityimmutability-direct-link-to-heading">Immutability<a href="#immutability"
title="Direct link to heading">#</a></h3>
<p>"Mutable" means "changeable". If something is "immutable", it can never be changed.
</p>
<p>JavaScript objects and arrays are all mutable by default. If I create an object, I can change the contents of its
fields. If I create an array, I can change the contents as well:</p>
<p>This is called <em>mutating</em> the object or array. It's the same object or array reference in memory, but
now the contents inside the object have changed.</p>
<p><strong>In order to update values immutably, your code must make <em>copies</em> of existing objects/arrays, and
then modify the copies</strong>.</p>
<p>We can do this by hand using JavaScript's array / object spread operators, as well as array methods that
return new copies of the array instead of mutating the original array:</p>
<p><strong>Redux expects that all state updates are done immutably</strong>. We'll look at where and how this
is important a bit later, as well as some easier ways to write immutable update logic.</p>
<h3 class="mume-header" id="terminologyterminology-direct-link-to-heading">Terminology<a href="#terminology"
title="Direct link to heading">#</a></h3>
<p>There are some important Redux terms that you'll need to be familiar with before we continue:</p>
<h4 class="mume-header" id="actionsactions-direct-link-to-heading">Actions<a href="#actions"
title="Direct link to heading">#</a></h4>
<p>An <strong>action</strong> is a plain JavaScript object that has a <code class="language-js">type</code> field.
<strong>You can think
of an action as an event that describes something that happened in the application</strong>.
</p>
<p>The <code class="language-js">type</code> field should be a string that gives this action a descriptive name,
like
<code class="language-js">"todos/todoAdded"</code>. We usually write that type string like
<code class="language-js">"domain/eventName"</code>
, where the first part is the feature or category that this action
belongs to, and the second part is the specific thing that happened.
</p>
<iframe loading="lazy" src="https://codesandbox.io/embed/hardcore-tdd-kowsj?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="hardcore-tdd-kowsj"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<p>An action object can have other fields with additional information about what happened. By convention, we put
that information in a field called <code class="language-js">payload</code>.</p>
<p>A typical action object might look like this:</p>
<h4 class="mume-header" id="action-creatorsaction-creators-direct-link-to-heading">Action Creators<a
href="#action-creators" title="Direct link to heading">#</a></h4>
<p>An <strong>action creator</strong> is a function that creates and returns an action object. We typically use
these so we don't have to write the action object by hand every time:</p>
<h4 class="mume-header" id="reducersreducers-direct-link-to-heading">Reducers<a href="#reducers"
title="Direct link to heading">#</a></h4>
<p>A <strong>reducer</strong> is a function that receives the current <code class="language-js">state</code> and an
<code class="language-js">action</code>
object, decides how to update the state if necessary, and returns the new state:
<code class="language-js">(state, action) => newState</code>. <strong>You can think of a reducer as an event
listener which handles
events based on the received action (event) type.</strong>
</p>
<h5 class="mume-header" id="info">info</h5>
<p>"Reducer" functions get their name because they're similar to the kind of callback function you
pass to the <a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"><code
class="language-js">Array.reduce()</code></a>
method.</p>
<p>Reducers must <em>always</em> follow some specific rules:</p>
<ul>
<li>They should only calculate the new state value based on the <code class="language-js">state</code> and <code
class="language-js">action</code>
arguments</li>
<li>They are not allowed to modify the existing <code class="language-js">state</code>. Instead, they must make
<em>immutable
updates</em>, by copying the existing <code class="language-js">state</code> and making changes to the copied
values.
</li>
<li>They must not do any asynchronous logic, calculate random values, or cause other "side effects"</li>
</ul>
<p>We'll talk more about the rules of reducers later, including why they're important and how to follow
them correctly.</p>
<p>The logic inside reducer functions typically follows the same series of steps:</p>
<ul>
<li>Check to see if the reducer cares about this action
<ul>
<li>If so, make a copy of the state, update the copy with new values, and return it</li>
</ul>
</li>
<li>Otherwise, return the existing state unchanged</li>
</ul>
<p>Here's a small example of a reducer, showing the steps that each reducer should follow:</p>
<p>Reducers can use any kind of logic inside to decide what the new state should be: <code
class="language-js">if/else</code>,
<code class="language-js">switch</code>, loops, and so on.
</p>
<h4 class="mume-header" id="detailed-explanation-why-are-they-called-reducers">Detailed Explanation: Why Are They
Called 'Reducers?'</h4>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"><code
class="language-js">Array.reduce()</code></a>
method lets you take an array of values, process each item in the array one at a time, and return a single final
result. You can think of it as "reducing the array down to one value".</p>
<p><code class="language-js">Array.reduce()</code> takes a callback function as an argument, which will be called
one time for each item
in the array. It takes two arguments:</p>
<ul>
<li><code class="language-js">previousResult</code>, the value that your callback returned last time</li>
<li><code class="language-js">currentItem</code>, the current item in the array</li>
</ul>
<p>The first time that the callback runs, there isn't a <code class="language-js">previousResult</code>
available, so we need to
also pass in an initial value that will be used as the first <code class="language-js">previousResult</code>.</p>
<p>If we wanted to add together an array of numbers to find out what the total is, we could write a reduce callback
that looks like this:</p>
<p>Notice that this <code class="language-js">addNumbers</code> "reduce callback" function doesn't
need to keep track of
anything itself. It takes the <code class="language-js">previousResult</code> and <code
class="language-js">currentItem</code> arguments, does something
with them, and returns a new result value.</p>
<p><strong>A Redux reducer function is exactly the same idea as this "reduce callback" function!</strong>
It takes a "previous result" (the <code class="language-js">state</code>), and the "current
item" (the
<code class="language-js">action</code> object), decides a new state value based on those arguments, and returns
that new state.
</p>
<p>If we were to create an array of Redux actions, call <code class="language-js">reduce()</code>, and pass in a
reducer function,
we'd get a final result the same way:</p>
<p>We can say that <strong>Redux reducers reduce a set of actions (over time) into a single state</strong>. The
difference is that with <code class="language-js">Array.reduce()</code> it happens all at once, and with Redux, it
happens over the
lifetime of your running app.</p>
<h4 class="mume-header" id="storestore-direct-link-to-heading">Store<a href="#store"
title="Direct link to heading">#</a></h4>
<p>The current Redux application state lives in an object called the <strong>store</strong> .</p>
<p>The store is created by passing in a reducer, and has a method called <code class="language-js">getState</code>
that returns the
current state value:</p>
<h4 class="mume-header" id="dispatchdispatch-direct-link-to-heading">Dispatch<a href="#dispatch"
title="Direct link to heading">#</a></h4>
<p>The Redux store has a method called <code class="language-js">dispatch</code>. <strong>The only way to update the
state is to call
<code class="language-js">store.dispatch()</code> and pass in an action object</strong>. The store will run its
reducer function and
save the new state value inside, and we can call <code class="language-js">getState()</code> to retrieve the
updated value:</p>
<p><strong>You can think of dispatching actions as "triggering an event"</strong> in the application.
Something happened, and we want the store to know about it. Reducers act like event listeners, and when they hear
an action they are interested in, they update the state in response.</p>
<p>We typically call action creators to dispatch the right action:</p>
<h4 class="mume-header" id="selectorsselectors-direct-link-to-heading">Selectors<a href="#selectors"
title="Direct link to heading">#</a></h4>
<p><strong>Selectors</strong> are functions that know how to extract specific pieces of information from a store
state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app
need to read the same data:</p>
<h3 class="mume-header" id="redux-application-data-flowredux-application-data-flow-direct-link-to-heading">Redux
Application Data Flow<a href="#redux-application-data-flow" title="Direct link to heading">#</a></h3>
<p>Earlier, we talked about "one-way data flow", which describes this sequence of steps to update the app:
</p>
<ul>
<li>State describes the condition of the app at a specific point in time</li>
<li>The UI is rendered based on that state</li>
<li>When something happens (such as a user clicking a button), the state is updated based on what occurred</li>
<li>The UI re-renders based on the new state</li>
</ul>
<p>For Redux specifically, we can break these steps into more detail:</p>
<ul>
<li>Initial setup:
<ul>
<li>A Redux store is created using a root reducer function</li>
<li>The store calls the root reducer once, and saves the return value as its initial <code
class="language-js">state</code></li>
<li>When the UI is first rendered, UI components access the current state of the Redux store, and use that
data to decide what to render. They also subscribe to any future store updates so they can know if the state
has changed.</li>
</ul>
</li>
<li>Updates:
<ul>
<li>Something happens in the app, such as a user clicking a button</li>
<li>The app code dispatches an action to the Redux store, like
<code class="language-js">dispatch({type: 'counter/increment'})</code>
</li>
<li>The store runs the reducer function again with the previous <code class="language-js">state</code> and the
current
<code class="language-js">action</code>, and saves the return value as the new <code
class="language-js">state</code>