The Complete Redux Book

179 Pages·2017·0.93 MB·English

The Complete Redux Book
Everything you need to build real projects with Redux
Ilya Gelman and Boris Dinkevich
Thisbookisforsaleathttp://leanpub.com/redux-book
Thisversionwaspublishedon2017-01-30
ThisisaLeanpubbook.LeanpubempowersauthorsandpublisherswiththeLeanPublishing
process.LeanPublishingistheactofpublishinganin-progressebookusinglightweighttoolsand
manyiterationstogetreaderfeedback,pivotuntilyouhavetherightbookandbuildtractiononce
youdo.
©2015-2017IlyaGelmanandBorisDinkevich
Tweet This Book!
PleasehelpIlyaGelmanandBorisDinkevichbyspreadingthewordaboutthisbookonTwitter!
Thesuggestedtweetforthisbookis:
TimetolearnRedux!
Thesuggestedhashtagforthisbookis#ReduxBook.
Findoutwhatotherpeoplearesayingaboutthebookbyclickingonthislinktosearchforthis
hashtagonTwitter:
https://twitter.com/search?q=#ReduxBook
Contents
ShouldIReadThisBook? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
HowtoReadThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
CodeRepository . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Part1.IntroductiontoRedux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Chapter1.CoreConceptsofFluxandRedux . . . . . . . . . . . . . . . . . . . . . . . . . 6
WhatIsFlux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
ReduxandFlux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
ReduxTerminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
GeneralConcepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
ReduxandReact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
BasicReduxImplementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Chapter2.YourFirstReduxApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
StarterProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
OurFirstApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
SettingUptheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
AddingRecipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
AddingIngredients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
StructuringtheCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
ACloserLookatReducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
HandlingTyposandDuplicates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
SimpleUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Logging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
GettingDatafromtheServer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Part2.RealWorldUsage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Chapter3.StateManagement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
CONTENTS
TheConceptofSeparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
StateasaDatabase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
KeepingaNormalizedState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
PersistingState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Real-WorldState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Chapter4.ServerCommunication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
UsingPromisesinActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
APIMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
MovingCodefromActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
UsingtheAPIMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
ErrorHandling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
LoadingIndicator(Spinner) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
DynamicActionTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
MoreExtensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
ChainingAPIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
CancelingAPIRequests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Chapter5.WebSockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
BasicArchitecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
ReduxLink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
CodeImplementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
CompleteWebSocketMiddlewareCode . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Chapter6.Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
TestFilesandDirectories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
TestingActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
AsyncActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
ReducerTests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
TestingMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
IntegrationTests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Part3.AdvancedConcepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Chapter7.TheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
CreatingaStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
DecoratingtheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
CONTENTS
Chapter8.ActionsandActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
PassingParameterstoActions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
ActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
FluxStandardActions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
StringConstants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
TestingActionCreators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
redux-thunk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
redux-actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Chapter9.Reducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
ReducersinPractice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
AvoidingMutations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
EnsuringImmutability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Higher-OrderReducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
TestingReducers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Chapter10.Middleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Understandingnext() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
OurFirstMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
AsyncActions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
UsingMiddlewareforFlowControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
OtherActionTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
DifferenceBetweennext()anddispatch() . . . . . . . . . . . . . . . . . . . . . . . . . 168
Parameter-BasedMiddleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
HowAreMiddlewareUsed? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
FurtherReading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
ResourceRepositories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
UsefulLibraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
CoursesandTutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Should I Read This Book?
There are many tutorials and blog posts about Redux on the Internet. The library also has great
official documentation. This book isn’t supposed to be either a tutorial or documentation. The goal
is to provide a methodical explanation of Redux core concepts and how those can be extended and
usedinlargeandcomplexReduxapplications.
As a frontend consultancy, we help dozens of companies build great projects using Redux. Many
projects face the same problems and ask the same questions. How should we structure the
application? What is the best way to implement server communication? What is the best solution
forformvalidation?Whereshouldwehandlesideeffects?HowwillReduxbenefitourapplications?
ThisbookisintendedtoserveasacompanionfordevelopersusingReduxonadailybasis.Itaimsto
give answers to many of the above questions and provide solutions to the most common problems
in real-world applications. It can be used to learn Redux from the ground up, to better understand
thestructureofalargeapplication,andasareferenceduringdevelopment.
The book is structured in a way that doesn’t force the reader to read it start to finish but rather
allows you to skip parts and come back to them when you face the problem at hand or have free
timetodeepenyourknowledge.WeloveRedux,andwehavetriedtoshareourexcitementaboutit
inthisbook.Wehopethatyouwillfindituseful.
How to Read This Book
While Redux in itself is a small library, the underlying concepts and the ecosystem around it are
large and complex. In this book we cover the core and common concepts and methods a developer
needstoworkwithReduxonbothsmallandlarge-scaleapplications.
The book is separated into three parts. In the first part you will learn the basics of Redux. Chapter
1 covers the core concepts behind Redux, introducing the different “actors” and how it is built. In
Chapter 2, we build an example project step by step; here, you will learn how to use Redux in a
project.
The second part of the book is about examples and use cases from real applications. Redux has
a great ecosystem, and there are a lot of tips, tricks, and libraries that can be applied to many
projects of different scale. We provide you with solutions for common problems including server
communications,authorization,internationalization,routing,forms,wizards,andmore.
The third part is a deep dive into Redux usage. It is separated into chapters by Redux entity types:
actions,middleware,reducers,andthestoreandstoreenhancers.Thechaptersinthissectioninclude
advancedexplanationsofReduxinternalsandhowtoproperlyusethemincomplexscenarios,and
theyareamust-readforanyoneconsideringbuildinglargeapplicationswithRedux.
Itishighlyrecommendedthatyoustartbyreadingthefirstpartasawhole.Evenifyoualreadyhave
knowledgeofReduxandhaveusedit,theopeningchapterswillclarifyalltheunderlyingconcepts
andlaydownthegroundworkforthecodewewillusethroughoutthesecondandthirdpartsofthe
book.
No matter who you are—an explorer learning about Redux for fun, or a hard-working professional
whoneedstosolverealproblemsfast—thisbookwillprovidenewideasandinsightstohelpyouon
yourpath.
Acknowledgements
Writing a technical book on a popular JavaScript library nowadays isn’t a simple task. New
techniques, best practices and opinions keep popping up every other week. Combined with daily
job and a family makes it even harder. The only way we could succeed is with a help from other
awesomepeoplealongtheway.
ToReduxcreators,DanAbramovandAndrewClark,aswellastomanycontributorstoReduxand
itsecosystem,thankyouforimprovingdatamanagementandmakingthisbookrelevant.
To our technical copyeditor, Rachel Head¹, thank you so much for fixing our English and making
thisbookmoreunderstandable.
Toallourcolleaguesat500Tech²,thanksforbeingawesomeandmakingusfeelgoodeveryday.
And obviously thank you, our dear reader, for deciding to spend your time and money on reading
thisbook.Wehopeyouenjoyreadingitasmuchaswedidwritingit.
Boris&Ilya
¹https://fr.linkedin.com/in/rachel-head-a45258a2
²http://500tech.com
Code Repository
The code samples from this book are available in the book repository on Github and should work
inallmodernbrowsers.
https://github.com/redux-book